ar-design 0.3.81 → 0.3.83
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.
- package/dist/components/data-display/table/Editable.js +5 -2
- package/dist/components/form/input/phone/IProps.d.ts +3 -4
- package/dist/components/form/input/phone/Phone.js +23 -217
- package/dist/libs/infrastructure/shared/{PhoneMask.d.ts → PHONE.d.ts} +2 -2
- package/dist/libs/infrastructure/shared/{PhoneMask.js → PHONE.js} +2 -2
- package/package.json +1 -1
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React, { useState } from "react";
|
|
2
|
+
import React, { useEffect, useState } from "react";
|
|
3
3
|
import Input from "../../form/input";
|
|
4
4
|
import DatePicker from "../../form/date-picker";
|
|
5
5
|
import Select from "../../form/select";
|
|
6
6
|
const Editable = function ({ c, item, index, onEditable, validation }) {
|
|
7
|
+
// variables
|
|
7
8
|
const key = c.key;
|
|
8
9
|
const itemValue = item[c.key];
|
|
9
10
|
const selectItem = c.editable?.options?.find((x) => x.value === itemValue);
|
|
10
11
|
const selectItems = Array.isArray(itemValue)
|
|
11
12
|
? c.editable?.options?.filter((x) => itemValue.includes(x.value))
|
|
12
13
|
: [];
|
|
14
|
+
const _vText = validation?.[`${c.key}_${index}`];
|
|
13
15
|
// states
|
|
14
16
|
const [value, setValue] = useState(itemValue);
|
|
15
|
-
|
|
17
|
+
// useEffects
|
|
18
|
+
useEffect(() => setValue(itemValue), [item]);
|
|
16
19
|
switch (c.editable?.type) {
|
|
17
20
|
case "string":
|
|
18
21
|
case "number":
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { IBorder, IColors,
|
|
1
|
+
import { IBorder, IColors, IValidation, IVariant } from "../../../../libs/types/IGlobalProps";
|
|
2
2
|
import { Option } from "../../../../libs/types";
|
|
3
|
-
interface IProps extends IVariant, IColors, IBorder, IValidation
|
|
4
|
-
|
|
3
|
+
interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "color">, IVariant, IColors, IBorder, IValidation {
|
|
4
|
+
options: Option[];
|
|
5
5
|
values: {
|
|
6
6
|
option: string;
|
|
7
7
|
value: string | number | readonly string[] | undefined;
|
|
8
8
|
};
|
|
9
9
|
onSelected: (option: Option | undefined) => void;
|
|
10
|
-
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
11
10
|
}
|
|
12
11
|
export default IProps;
|
|
@@ -2,207 +2,8 @@
|
|
|
2
2
|
import React, { useEffect, useRef, useState } from "react";
|
|
3
3
|
import Input from "..";
|
|
4
4
|
import Select from "../../select";
|
|
5
|
-
import
|
|
6
|
-
const
|
|
7
|
-
// #---- TR
|
|
8
|
-
{ text: "🇹🇷 (+90)", value: "+90" },
|
|
9
|
-
// #---- OTHER
|
|
10
|
-
{ text: "🇦🇫 (+93)", value: "+93" },
|
|
11
|
-
{ text: "🇦🇱 (+355)", value: "+355" },
|
|
12
|
-
{ text: "🇩🇿 (+213)", value: "+213" },
|
|
13
|
-
{ text: "🇦🇸 (+1)", value: "+1" },
|
|
14
|
-
{ text: "🇦🇩 (+376)", value: "+376" },
|
|
15
|
-
{ text: "🇦🇴 (+244)", value: "+244" },
|
|
16
|
-
{ text: "🇦🇮 (+1)", value: "+1" },
|
|
17
|
-
{ text: "🇦🇬 (+1)", value: "+1" },
|
|
18
|
-
{ text: "🇦🇷 (+54)", value: "+54" },
|
|
19
|
-
{ text: "🇦🇲 (+374)", value: "+374" },
|
|
20
|
-
{ text: "🇦🇼 (+297)", value: "+297" },
|
|
21
|
-
{ text: "🇦🇺 (+61)", value: "+61" },
|
|
22
|
-
{ text: "🇦🇹 (+43)", value: "+43" },
|
|
23
|
-
{ text: "🇦🇿 (+994)", value: "+994" },
|
|
24
|
-
{ text: "🇧🇸 (+1)", value: "+1" },
|
|
25
|
-
{ text: "🇧🇭 (+973)", value: "+973" },
|
|
26
|
-
{ text: "🇧🇩 (+880)", value: "+880" },
|
|
27
|
-
{ text: "🇧🇧 (+1)", value: "+1" },
|
|
28
|
-
{ text: "🇧🇾 (+375)", value: "+375" },
|
|
29
|
-
{ text: "🇧🇪 (+32)", value: "+32" },
|
|
30
|
-
{ text: "🇧🇿 (+501)", value: "+501" },
|
|
31
|
-
{ text: "🇧🇯 (+229)", value: "+229" },
|
|
32
|
-
{ text: "🇧🇲 (+1)", value: "+1" },
|
|
33
|
-
{ text: "🇧🇹 (+975)", value: "+975" },
|
|
34
|
-
{ text: "🇧🇴 (+591)", value: "+591" },
|
|
35
|
-
{ text: "🇧🇦 (+387)", value: "+387" },
|
|
36
|
-
{ text: "🇧🇼 (+267)", value: "+267" },
|
|
37
|
-
{ text: "🇧🇷 (+55)", value: "+55" },
|
|
38
|
-
{ text: "🇧🇳 (+673)", value: "+673" },
|
|
39
|
-
{ text: "🇧🇬 (+359)", value: "+359" },
|
|
40
|
-
{ text: "🇧🇫 (+226)", value: "+226" },
|
|
41
|
-
{ text: "🇧🇮 (+257)", value: "+257" },
|
|
42
|
-
{ text: "🇰🇭 (+855)", value: "+855" },
|
|
43
|
-
{ text: "🇨🇲 (+237)", value: "+237" },
|
|
44
|
-
{ text: "🇨🇦 (+1)", value: "+1" },
|
|
45
|
-
{ text: "🇨🇻 (+238)", value: "+238" },
|
|
46
|
-
{ text: "🇨🇫 (+236)", value: "+236" },
|
|
47
|
-
{ text: "🇹🇩 (+235)", value: "+235" },
|
|
48
|
-
{ text: "🇨🇱 (+56)", value: "+56" },
|
|
49
|
-
{ text: "🇨🇳 (+86)", value: "+86" },
|
|
50
|
-
{ text: "🇨🇴 (+57)", value: "+57" },
|
|
51
|
-
{ text: "🇰🇲 (+269)", value: "+269" },
|
|
52
|
-
{ text: "🇨🇬 (+242)", value: "+242" },
|
|
53
|
-
{ text: "🇨🇷 (+506)", value: "+506" },
|
|
54
|
-
{ text: "🇭🇷 (+385)", value: "+385" },
|
|
55
|
-
{ text: "🇨🇺 (+53)", value: "+53" },
|
|
56
|
-
{ text: "🇨🇾 (+357)", value: "+357" },
|
|
57
|
-
{ text: "🇨🇿 (+420)", value: "+420" },
|
|
58
|
-
{ text: "🇩🇰 (+45)", value: "+45" },
|
|
59
|
-
{ text: "🇩🇯 (+253)", value: "+253" },
|
|
60
|
-
{ text: "🇩🇲 (+1)", value: "+1" },
|
|
61
|
-
{ text: "🇩🇴 (+1)", value: "+1" },
|
|
62
|
-
{ text: "🇪🇨 (+593)", value: "+593" },
|
|
63
|
-
{ text: "🇪🇬 (+20)", value: "+20" },
|
|
64
|
-
{ text: "🇸🇻 (+503)", value: "+503" },
|
|
65
|
-
{ text: "🇪🇪 (+372)", value: "+372" },
|
|
66
|
-
{ text: "🇪🇹 (+251)", value: "+251" },
|
|
67
|
-
{ text: "🇫🇯 (+679)", value: "+679" },
|
|
68
|
-
{ text: "🇫🇮 (+358)", value: "+358" },
|
|
69
|
-
{ text: "🇫🇷 (+33)", value: "+33" },
|
|
70
|
-
{ text: "🇬🇦 (+241)", value: "+241" },
|
|
71
|
-
{ text: "🇬🇲 (+220)", value: "+220" },
|
|
72
|
-
{ text: "🇬🇪 (+995)", value: "+995" },
|
|
73
|
-
{ text: "🇩🇪 (+49)", value: "+49" },
|
|
74
|
-
{ text: "🇬🇭 (+233)", value: "+233" },
|
|
75
|
-
{ text: "🇬🇷 (+30)", value: "+30" },
|
|
76
|
-
{ text: "🇬🇩 (+1)", value: "+1" },
|
|
77
|
-
{ text: "🇬🇹 (+502)", value: "+502" },
|
|
78
|
-
{ text: "🇬🇳 (+224)", value: "+224" },
|
|
79
|
-
{ text: "🇬🇼 (+245)", value: "+245" },
|
|
80
|
-
{ text: "🇬🇾 (+592)", value: "+592" },
|
|
81
|
-
{ text: "🇭🇹 (+509)", value: "+509" },
|
|
82
|
-
{ text: "🇭🇳 (+504)", value: "+504" },
|
|
83
|
-
{ text: "🇭🇰 (+852)", value: "+852" },
|
|
84
|
-
{ text: "🇭🇺 (+36)", value: "+36" },
|
|
85
|
-
{ text: "🇮🇸 (+354)", value: "+354" },
|
|
86
|
-
{ text: "🇮🇳 (+91)", value: "+91" },
|
|
87
|
-
{ text: "🇮🇩 (+62)", value: "+62" },
|
|
88
|
-
{ text: "🇮🇷 (+98)", value: "+98" },
|
|
89
|
-
{ text: "🇮🇶 (+964)", value: "+964" },
|
|
90
|
-
{ text: "🇮🇪 (+353)", value: "+353" },
|
|
91
|
-
{ text: "🇮🇱 (+972)", value: "+972" },
|
|
92
|
-
{ text: "🇮🇹 (+39)", value: "+39" },
|
|
93
|
-
{ text: "🇨🇮 (+225)", value: "+225" },
|
|
94
|
-
{ text: "🇯🇲 (+1)", value: "+1" },
|
|
95
|
-
{ text: "🇯🇵 (+81)", value: "+81" },
|
|
96
|
-
{ text: "🇯🇴 (+962)", value: "+962" },
|
|
97
|
-
{ text: "🇰🇿 (+7)", value: "+7" },
|
|
98
|
-
{ text: "🇰🇪 (+254)", value: "+254" },
|
|
99
|
-
{ text: "🇰🇮 (+686)", value: "+686" },
|
|
100
|
-
{ text: "🇰🇼 (+965)", value: "+965" },
|
|
101
|
-
{ text: "🇰🇬 (+996)", value: "+996" },
|
|
102
|
-
{ text: "🇱🇦 (+856)", value: "+856" },
|
|
103
|
-
{ text: "🇱🇻 (+371)", value: "+371" },
|
|
104
|
-
{ text: "🇱🇧 (+961)", value: "+961" },
|
|
105
|
-
{ text: "🇱🇸 (+266)", value: "+266" },
|
|
106
|
-
{ text: "🇱🇷 (+231)", value: "+231" },
|
|
107
|
-
{ text: "🇱🇾 (+218)", value: "+218" },
|
|
108
|
-
{ text: "🇱🇹 (+370)", value: "+370" },
|
|
109
|
-
{ text: "🇱🇺 (+352)", value: "+352" },
|
|
110
|
-
{ text: "🇲🇰 (+389)", value: "+389" },
|
|
111
|
-
{ text: "🇲🇬 (+261)", value: "+261" },
|
|
112
|
-
{ text: "🇲🇼 (+265)", value: "+265" },
|
|
113
|
-
{ text: "🇲🇾 (+60)", value: "+60" },
|
|
114
|
-
{ text: "🇲🇻 (+960)", value: "+960" },
|
|
115
|
-
{ text: "🇲🇱 (+223)", value: "+223" },
|
|
116
|
-
{ text: "🇲🇹 (+356)", value: "+356" },
|
|
117
|
-
{ text: "🇲🇷 (+222)", value: "+222" },
|
|
118
|
-
{ text: "🇲🇺 (+230)", value: "+230" },
|
|
119
|
-
{ text: "🇲🇽 (+52)", value: "+52" },
|
|
120
|
-
{ text: "🇫🇲 (+691)", value: "+691" },
|
|
121
|
-
{ text: "🇲🇩 (+373)", value: "+373" },
|
|
122
|
-
{ text: "🇲🇨 (+377)", value: "+377" },
|
|
123
|
-
{ text: "🇲🇳 (+976)", value: "+976" },
|
|
124
|
-
{ text: "🇲🇪 (+382)", value: "+382" },
|
|
125
|
-
{ text: "🇲🇦 (+212)", value: "+212" },
|
|
126
|
-
{ text: "🇲🇿 (+258)", value: "+258" },
|
|
127
|
-
{ text: "🇲🇲 (+95)", value: "+95" },
|
|
128
|
-
{ text: "🇳🇦 (+264)", value: "+264" },
|
|
129
|
-
{ text: "🇳🇷 (+674)", value: "+674" },
|
|
130
|
-
{ text: "🇳🇵 (+977)", value: "+977" },
|
|
131
|
-
{ text: "🇳🇱 (+31)", value: "+31" },
|
|
132
|
-
{ text: "🇳🇿 (+64)", value: "+64" },
|
|
133
|
-
{ text: "🇳🇮 (+505)", value: "+505" },
|
|
134
|
-
{ text: "🇳🇪 (+227)", value: "+227" },
|
|
135
|
-
{ text: "🇳🇬 (+234)", value: "+234" },
|
|
136
|
-
{ text: "🇳🇺 (+683)", value: "+683" },
|
|
137
|
-
{ text: "🇰🇵 (+850)", value: "+850" },
|
|
138
|
-
{ text: "🇲🇵 (+1)", value: "+1" },
|
|
139
|
-
{ text: "🇳🇴 (+47)", value: "+47" },
|
|
140
|
-
{ text: "🇴🇲 (+968)", value: "+968" },
|
|
141
|
-
{ text: "🇵🇰 (+92)", value: "+92" },
|
|
142
|
-
{ text: "🇵🇼 (+680)", value: "+680" },
|
|
143
|
-
{ text: "🇵🇦 (+507)", value: "+507" },
|
|
144
|
-
{ text: "🇵🇬 (+675)", value: "+675" },
|
|
145
|
-
{ text: "🇵🇾 (+595)", value: "+595" },
|
|
146
|
-
{ text: "🇵🇪 (+51)", value: "+51" },
|
|
147
|
-
{ text: "🇵🇭 (+63)", value: "+63" },
|
|
148
|
-
{ text: "🇵🇱 (+48)", value: "+48" },
|
|
149
|
-
{ text: "🇵🇹 (+351)", value: "+351" },
|
|
150
|
-
{ text: "🇶🇦 (+974)", value: "+974" },
|
|
151
|
-
{ text: "🇷🇴 (+40)", value: "+40" },
|
|
152
|
-
{ text: "🇷🇺 (+7)", value: "+7" },
|
|
153
|
-
{ text: "🇷🇼 (+250)", value: "+250" },
|
|
154
|
-
{ text: "🇰🇳 (+1)", value: "+1" },
|
|
155
|
-
{ text: "🇱🇨 (+1)", value: "+1" },
|
|
156
|
-
{ text: "🇻🇨 (+1)", value: "+1" },
|
|
157
|
-
{ text: "🇼🇸 (+685)", value: "+685" },
|
|
158
|
-
{ text: "🇸🇲 (+378)", value: "+378" },
|
|
159
|
-
{ text: "🇸🇹 (+239)", value: "+239" },
|
|
160
|
-
{ text: "🇸🇦 (+966)", value: "+966" },
|
|
161
|
-
{ text: "🇸🇳 (+221)", value: "+221" },
|
|
162
|
-
{ text: "🇷🇸 (+381)", value: "+381" },
|
|
163
|
-
{ text: "🇸🇨 (+248)", value: "+248" },
|
|
164
|
-
{ text: "🇸🇱 (+232)", value: "+232" },
|
|
165
|
-
{ text: "🇸🇬 (+65)", value: "+65" },
|
|
166
|
-
{ text: "🇸🇰 (+421)", value: "+421" },
|
|
167
|
-
{ text: "🇸🇮 (+386)", value: "+386" },
|
|
168
|
-
{ text: "🇸🇧 (+677)", value: "+677" },
|
|
169
|
-
{ text: "🇸🇴 (+252)", value: "+252" },
|
|
170
|
-
{ text: "🇿🇦 (+27)", value: "+27" },
|
|
171
|
-
{ text: "🇰🇷 (+82)", value: "+82" },
|
|
172
|
-
{ text: "🇸🇸 (+211)", value: "+211" },
|
|
173
|
-
{ text: "🇪🇸 (+34)", value: "+34" },
|
|
174
|
-
{ text: "🇱🇰 (+94)", value: "+94" },
|
|
175
|
-
{ text: "🇸🇩 (+249)", value: "+249" },
|
|
176
|
-
{ text: "🇸🇷 (+597)", value: "+597" },
|
|
177
|
-
{ text: "🇸🇪 (+46)", value: "+46" },
|
|
178
|
-
{ text: "🇨🇭 (+41)", value: "+41" },
|
|
179
|
-
{ text: "🇸🇾 (+963)", value: "+963" },
|
|
180
|
-
{ text: "🇹🇯 (+992)", value: "+992" },
|
|
181
|
-
{ text: "🇹🇿 (+255)", value: "+255" },
|
|
182
|
-
{ text: "🇹🇭 (+66)", value: "+66" },
|
|
183
|
-
{ text: "🇹🇱 (+670)", value: "+670" },
|
|
184
|
-
{ text: "🇹🇬 (+228)", value: "+228" },
|
|
185
|
-
{ text: "🇹🇴 (+676)", value: "+676" },
|
|
186
|
-
{ text: "🇹🇹 (+1)", value: "+1" },
|
|
187
|
-
{ text: "🇹🇳 (+216)", value: "+216" },
|
|
188
|
-
{ text: "🇹🇲 (+993)", value: "+993" },
|
|
189
|
-
{ text: "🇹🇻 (+688)", value: "+688" },
|
|
190
|
-
{ text: "🇺🇬 (+256)", value: "+256" },
|
|
191
|
-
{ text: "🇺🇦 (+380)", value: "+380" },
|
|
192
|
-
{ text: "🇦🇪 (+971)", value: "+971" },
|
|
193
|
-
{ text: "🇬🇧 (+44)", value: "+44" },
|
|
194
|
-
{ text: "🇺🇸 (+1)", value: "+1" },
|
|
195
|
-
{ text: "🇺🇾 (+598)", value: "+598" },
|
|
196
|
-
{ text: "🇺🇿 (+998)", value: "+998" },
|
|
197
|
-
{ text: "🇻🇺 (+678)", value: "+678" },
|
|
198
|
-
{ text: "🇻🇦 (+379)", value: "+379" },
|
|
199
|
-
{ text: "🇻🇪 (+58)", value: "+58" },
|
|
200
|
-
{ text: "🇻🇳 (+84)", value: "+84" },
|
|
201
|
-
{ text: "🇾🇪 (+967)", value: "+967" },
|
|
202
|
-
{ text: "🇿🇲 (+260)", value: "+260" },
|
|
203
|
-
{ text: "🇿🇼 (+263)", value: "+263" },
|
|
204
|
-
];
|
|
205
|
-
const Phone = ({ variant, color, name, values, onSelected, onChange, placeholder, validation, disabled, }) => {
|
|
5
|
+
import PHONE from "../../../../libs/infrastructure/shared/PHONE";
|
|
6
|
+
const Phone = ({ variant, color, options, values, onSelected, validation, ...attributes }) => {
|
|
206
7
|
// refs
|
|
207
8
|
const _input = useRef(null);
|
|
208
9
|
// states
|
|
@@ -216,30 +17,35 @@ const Phone = ({ variant, color, name, values, onSelected, onChange, placeholder
|
|
|
216
17
|
const caret = input.selectionStart ?? 0;
|
|
217
18
|
input.setSelectionRange(caret, caret + 1);
|
|
218
19
|
};
|
|
219
|
-
const handleChange = (event) => {
|
|
220
|
-
if (disabled)
|
|
221
|
-
return;
|
|
222
|
-
const { value } = event.target;
|
|
223
|
-
setValue(value);
|
|
224
|
-
onChange?.({
|
|
225
|
-
...event,
|
|
226
|
-
target: {
|
|
227
|
-
...event.target,
|
|
228
|
-
name,
|
|
229
|
-
value: value.replace(/\D/g, ""),
|
|
230
|
-
},
|
|
231
|
-
});
|
|
232
|
-
};
|
|
233
20
|
// useEffects
|
|
234
21
|
useEffect(() => {
|
|
235
22
|
setValue(values.value);
|
|
236
23
|
setSelected(options.find((option) => option.value === values.option));
|
|
237
24
|
}, [values]);
|
|
238
25
|
return (React.createElement("div", { className: "ar-input-phone-wrapper" },
|
|
239
|
-
React.createElement(Select, { style: { width: 130 }, variant: "outlined", color: "light", options: options
|
|
26
|
+
React.createElement(Select, { style: { width: 130 }, variant: "outlined", color: "light", options: options, value: selected, onChange: (option) => {
|
|
240
27
|
onSelected(option);
|
|
241
28
|
setSelected(option);
|
|
242
29
|
} }),
|
|
243
|
-
React.createElement(Input, { ref: _input,
|
|
30
|
+
React.createElement(Input, { ref: _input, ...attributes, variant: variant, color: color, value: PHONE.FormatByMask(selected?.value, _value), type: "tel", inputMode: "decimal", onChange: (event) => {
|
|
31
|
+
if (attributes.disabled)
|
|
32
|
+
return;
|
|
33
|
+
(() => {
|
|
34
|
+
if (attributes.onChange) {
|
|
35
|
+
const { id, name, value, type, dataset } = event.target;
|
|
36
|
+
attributes.onChange({
|
|
37
|
+
...event,
|
|
38
|
+
target: {
|
|
39
|
+
...event.target,
|
|
40
|
+
id: id,
|
|
41
|
+
name: name,
|
|
42
|
+
value: value,
|
|
43
|
+
type: type,
|
|
44
|
+
dataset: dataset,
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
})();
|
|
49
|
+
}, onClick: handleClick, validation: validation })));
|
|
244
50
|
};
|
|
245
51
|
export default Phone;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
declare class
|
|
1
|
+
declare class PHONE {
|
|
2
2
|
FormatByMask: (code: string, value: string) => string;
|
|
3
3
|
private GetMaskByCountry;
|
|
4
4
|
private countryMasks;
|
|
5
5
|
private GenerateMask;
|
|
6
6
|
}
|
|
7
|
-
declare const _default:
|
|
7
|
+
declare const _default: PHONE;
|
|
8
8
|
export default _default;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
class
|
|
1
|
+
class PHONE {
|
|
2
2
|
FormatByMask = (code, value) => {
|
|
3
3
|
const mask = this.GetMaskByCountry(code ?? "+90");
|
|
4
4
|
const digits = value.replace(/\D/g, "");
|
|
@@ -57,4 +57,4 @@ class PhoneMask {
|
|
|
57
57
|
.join(" ");
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
export default new
|
|
60
|
+
export default new PHONE();
|