@xaypay/tui 0.0.71 → 0.0.72
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/index.es.js +454 -166
- package/dist/index.js +454 -166
- package/package.json +1 -1
- package/src/components/autocomplate/autocomplate.stories.js +1 -1
- package/src/components/icon/ListItemJpeg.js +21 -0
- package/src/components/icon/ListItemPng.js +21 -0
- package/src/components/icon/index.js +2 -1
- package/src/components/input/index.js +22 -15
- package/src/components/input/input.stories.js +11 -5
- package/src/components/newAutocomplete/NewAutocomplete.stories.js +26 -26
- package/src/components/newAutocomplete/index.js +113 -92
- package/src/components/newFile/fileItem.js +213 -0
- package/src/components/newFile/index.js +154 -129
- package/src/components/newFile/newFile.stories.js +5 -2
- package/src/components/textarea/index.js +30 -1
- package/src/stories/configuration.stories.mdx +42 -0
- package/src/stories/static/autocomplete-usage.png +0 -0
- package/src/stories/static/file-single-usage.png +0 -0
- package/src/stories/static/file-usage.png +0 -0
- package/src/stories/static/input-usage.png +0 -0
- package/src/stories/static/tooltip-usage.png +0 -0
- package/src/stories/usage.stories.mdx +17 -8
- package/tui.config.js +20 -2
- package/src/stories/static/input-tooltip-usage.png +0 -0
- package/src/stories/static/new-autocomplete-usage.png +0 -0
package/package.json
CHANGED
|
@@ -21,7 +21,7 @@ Default.args = {
|
|
|
21
21
|
method: 'GET',
|
|
22
22
|
headers: {
|
|
23
23
|
'Content-Type': 'application/json',
|
|
24
|
-
'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.
|
|
24
|
+
'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImY2N2FjNmNiYjI2YWM3NTRhMDhhOTgxOTZkOTZjNjFjNWI3YTA1NzUyN2U4MGE3NzM0ZDJlOGFlZjNkMjY0ZmRiMGZkN2QwZjllZjA1MmE4IiwiaWF0IjoxNjgwNzYzMzU3LjUyMzI5OCwibmJmIjoxNjgwNzYzMzU3LjUyMzMwNSwiZXhwIjoxNjgwNzg4NTU3LjQ5NjQzLCJzdWIiOiJtaW5hc0BtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.XLp4N1C9XYnX8EITknJs-j684GkppCVrREA5ttTAEyloxCftJUEo6KQGp-2grZDZvWvwvsgD9NF5lecdPOIYuSEgp7NPgbAQ34-hRn0u6TGoC5LQI6Vjc_PijH9YoH2a2V9q58jAJrxSbwNjKsMixiHmAsahIKl_XRL1ZoDxpKDE23avnndCZZ9Fw_oe8ypkEscfgrpK9iT9EhxWXZWC9MJ-iAxHox6b6XWsVHkJg5oN5MApJt1h9h-oZQmrKNn_274z3evPChlrvSjTyqLzGWy3zlVUMgGQWBE5RsKiuUh1O3TsF4PYvANKp0a_urOFtU9Q-umyfFNlWfgoLsTtKIQE0xmlLi8Kr5OutSna-a0Eu2hzgTM47_x-cJb7ImokTxdgoh1DDODmLDKkfTTXhEQ-KNTQ4J5T8UDn6a11E6EzBEfJYOIv9eXz5bQBf5H14x4mzXEkHNeC10EAsUFH7b9JT8DPJISwazeAA5zloj39dVFVDLoJS2TvZAxMRLQuyoMSs7eEXp4i7TTWPyrDhMLJ-YUgxmbAhWfwQ9J1ULkLyzFCrmvUz4xPmeRp9gnUNCXOo52jjSVD8x5q3cokFhCEUuWP6fE_DSgChe18j5w75Xi7BjGAIHRJjYtyvJQHy0DIQf2qd6YbbKkyP4iW_PvLfJah9JTlOU1_QGhUWqc',
|
|
25
25
|
},
|
|
26
26
|
}).then((res)=> {
|
|
27
27
|
return res.json()
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const SvgListItemJpeg = ({ title, titleId, ...props }) => (
|
|
3
|
+
<svg
|
|
4
|
+
width="33"
|
|
5
|
+
height="42"
|
|
6
|
+
viewBox="0 0 33 42"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
aria-labelledby={titleId}
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
{title ? <title id={titleId}>{title}</title> : null}
|
|
13
|
+
<path
|
|
14
|
+
fillRule="evenodd"
|
|
15
|
+
clipRule="evenodd"
|
|
16
|
+
d="m32.384 10.667-.022-.026-.021-.025a.356.356 0 0 0-.052-.058L21.896.21 21.87.188l-.025-.021-.029-.026a.477.477 0 0 1-.029-.025L21.678 0H3.41c-.771 0-1.511.305-2.057.848A2.891 2.891 0 0 0 .5 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 3.409 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108Zm-1.338 28.437a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H3.41a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.588 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.588Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.98a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.588a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.588 11.99a.724.724 0 1 1 0-1.448H17.02a.724.724 0 0 1 0 1.449H5.588Zm17.974-1.643A1.451 1.451 0 0 1 22.107 8.9V2.47l7.913 7.878h-6.458ZM8.576 32.088v4.478c0 .246-.042.454-.127.624a.91.91 0 0 1-.352.382.99.99 0 0 1-.505.128c-.2 0-.374-.034-.523-.101a.755.755 0 0 1-.343-.334c-.079-.156-.119-.36-.119-.611H5.5c0 .436.09.797.268 1.08.179.285.425.496.738.634.317.137.679.206 1.086.206.398 0 .754-.079 1.068-.237.313-.158.56-.387.742-.686.182-.299.273-.66.273-1.085v-4.478H8.576Zm3.472 4.012h1.327c.495 0 .915-.079 1.261-.237.349-.158.614-.386.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.741-.272-1.046a1.849 1.849 0 0 0-.796-.72c-.345-.176-.766-.264-1.261-.264h-2.43v6.398h1.103V36.1Zm0-.874v-2.26h1.327c.29 0 .524.055.703.163a.97.97 0 0 1 .391.431c.085.176.128.365.128.567 0 .214-.043.404-.128.571a.876.876 0 0 1-.39.387c-.18.094-.414.14-.704.14h-1.327Zm14.545.087v2.444c-.09.12-.233.252-.426.395-.19.141-.444.263-.76.365-.317.103-.71.154-1.182.154-.402 0-.77-.068-1.103-.202a2.415 2.415 0 0 1-.866-.602 2.755 2.755 0 0 1-.558-.963 3.964 3.964 0 0 1-.198-1.3v-.444c0-.484.06-.914.18-1.292.123-.381.299-.703.527-.967.229-.264.504-.463.827-.598a2.805 2.805 0 0 1 1.103-.206c.524 0 .958.088 1.3.263.346.173.613.413.8.721.188.308.307.66.356 1.055h-1.08a1.7 1.7 0 0 0-.207-.598 1.046 1.046 0 0 0-.431-.413c-.185-.102-.425-.154-.72-.154-.256 0-.48.049-.673.145a1.271 1.271 0 0 0-.483.426 2.093 2.093 0 0 0-.286.686c-.065.27-.097.577-.097.923v.452c0 .352.037.664.11.937.076.272.185.502.325.69.144.187.318.33.523.426.205.093.437.14.695.14.252 0 .458-.02.62-.061.16-.044.288-.095.381-.154.097-.062.172-.12.225-.176v-1.27h-1.332v-.822h2.43ZM16.7 32.085h3.791v.884h-2.78v1.754h2.618v.875H17.71v2.033h2.781v.884h-3.79v-6.43Z"
|
|
17
|
+
fill="#051942"
|
|
18
|
+
/>
|
|
19
|
+
</svg>
|
|
20
|
+
);
|
|
21
|
+
export default SvgListItemJpeg;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const SvgListItemPng = ({ title, titleId, ...props }) => (
|
|
3
|
+
<svg
|
|
4
|
+
width="32"
|
|
5
|
+
height="42"
|
|
6
|
+
viewBox="0 0 32 42"
|
|
7
|
+
fill="none"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
aria-labelledby={titleId}
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
{title ? <title id={titleId}>{title}</title> : null}
|
|
13
|
+
<path
|
|
14
|
+
fillRule="evenodd"
|
|
15
|
+
clipRule="evenodd"
|
|
16
|
+
d="m31.873 10.655-.011-.014c-.007-.01-.014-.018-.021-.025a.356.356 0 0 0-.052-.058L21.396.21 21.37.188l-.025-.021a.476.476 0 0 0-.029-.025l-.029-.026L21.178 0H2.91C2.138 0 1.398.305.852.848A2.891 2.891 0 0 0 0 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 2.909 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108a.21.21 0 0 1-.01-.012Zm-1.327 28.449a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H2.91a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.088 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.088Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.48a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.088a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.088 11.99a.724.724 0 1 1 0-1.448H16.52a.724.724 0 0 1 0 1.449H5.088Zm17.974-1.643A1.451 1.451 0 0 1 21.607 8.9V2.47l7.913 7.878h-6.458ZM9.103 36.012h1.327c.495 0 .916-.079 1.261-.237.349-.158.614-.385.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.74-.272-1.046a1.85 1.85 0 0 0-.796-.72c-.345-.176-.766-.264-1.26-.264H8v6.398h1.103v-2.386Zm0-.874v-2.26h1.327c.29 0 .525.055.703.163.179.109.31.253.391.431.085.176.128.365.128.567 0 .214-.043.404-.128.571a.877.877 0 0 1-.39.387c-.18.094-.414.14-.704.14H9.103ZM13.7 32h1.09l3.292 5.106a63.566 63.566 0 0 1-.044-1.379V32h.956v6.398h-1.1l-3.303-4.9.002.044c.012.134.02.279.027.435l.018.468c.006.163.009.327.009.49v3.463H13.7V32Zm11.393 5.66v-2.443h-2.43v.822h1.332v1.27a1.19 1.19 0 0 1-.225.175c-.093.059-.22.11-.382.154a2.578 2.578 0 0 1-.62.062c-.257 0-.489-.047-.694-.14a1.408 1.408 0 0 1-.523-.427 2.062 2.062 0 0 1-.325-.69 3.614 3.614 0 0 1-.11-.936v-.453c0-.346.032-.653.097-.923.064-.27.16-.498.285-.685.13-.188.29-.33.484-.426.193-.097.417-.146.672-.146.296 0 .536.052.721.154.188.1.331.238.43.413a1.7 1.7 0 0 1 .207.598h1.081a2.633 2.633 0 0 0-.356-1.055 1.913 1.913 0 0 0-.8-.72c-.342-.176-.776-.264-1.3-.264-.41 0-.778.069-1.103.206a2.204 2.204 0 0 0-.826.598 2.742 2.742 0 0 0-.528.967c-.12.378-.18.809-.18 1.292v.444c0 .486.066.92.198 1.3.132.378.318.7.558.963.243.264.532.464.866.602.334.135.701.202 1.103.202.471 0 .865-.051 1.182-.154.316-.102.57-.224.76-.364.193-.144.335-.276.426-.396Z"
|
|
17
|
+
fill="#051942"
|
|
18
|
+
/>
|
|
19
|
+
</svg>
|
|
20
|
+
);
|
|
21
|
+
export default SvgListItemPng;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as Jpeg } from "./Jpeg";
|
|
2
|
+
export { default as Png } from "./Png";
|
|
@@ -12,6 +12,10 @@ export const InputTypes = {
|
|
|
12
12
|
PASSWORD: "password",
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
+
const P = styled.p`
|
|
16
|
+
animation: ${props => props.errorAnimation ? props.animation : 'none'};
|
|
17
|
+
`;
|
|
18
|
+
|
|
15
19
|
export const Input = ({
|
|
16
20
|
type,
|
|
17
21
|
size,
|
|
@@ -23,12 +27,12 @@ export const Input = ({
|
|
|
23
27
|
regexp,
|
|
24
28
|
height,
|
|
25
29
|
radius,
|
|
30
|
+
change,
|
|
26
31
|
padding,
|
|
27
32
|
tooltip,
|
|
28
33
|
leftIcon,
|
|
29
34
|
required,
|
|
30
35
|
disabled,
|
|
31
|
-
onChange,
|
|
32
36
|
transform,
|
|
33
37
|
iconWidth,
|
|
34
38
|
rightIcon,
|
|
@@ -91,14 +95,14 @@ export const Input = ({
|
|
|
91
95
|
${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
|
|
92
96
|
`;
|
|
93
97
|
|
|
94
|
-
const P = styled.p`
|
|
95
|
-
animation: ${errorAnimation ? animation : 'none'};
|
|
96
|
-
`;
|
|
97
|
-
|
|
98
98
|
const handleChange = (event) => {
|
|
99
99
|
const currentValue = event.target.value;
|
|
100
100
|
|
|
101
101
|
setInnerValue(currentValue);
|
|
102
|
+
if (change) {
|
|
103
|
+
change(currentValue);
|
|
104
|
+
}
|
|
105
|
+
|
|
102
106
|
if (type === 'tel') {
|
|
103
107
|
if (!phoneNumberRegex.test(currentValue)) {
|
|
104
108
|
telErrorMessage && setInnerErrorMessage(telErrorMessage);
|
|
@@ -107,13 +111,13 @@ export const Input = ({
|
|
|
107
111
|
setInnerErrorMessage('');
|
|
108
112
|
if (currentValue.length > 8) {
|
|
109
113
|
setInnerValue(currentValue.substr(0, 8));
|
|
110
|
-
if (
|
|
111
|
-
|
|
114
|
+
if (change) {
|
|
115
|
+
change(currentValue.substr(0, 8));
|
|
112
116
|
}
|
|
113
117
|
} else {
|
|
114
118
|
setInnerValue(currentValue);
|
|
115
|
-
if (
|
|
116
|
-
|
|
119
|
+
if (change) {
|
|
120
|
+
change(currentValue);
|
|
117
121
|
}
|
|
118
122
|
}
|
|
119
123
|
}
|
|
@@ -121,15 +125,15 @@ export const Input = ({
|
|
|
121
125
|
|
|
122
126
|
if (maxLength && currentValue.length > maxLength && type !== 'tel') {
|
|
123
127
|
setInnerValue(currentValue.substr(0, maxLength));
|
|
124
|
-
if (
|
|
125
|
-
|
|
128
|
+
if (change) {
|
|
129
|
+
change(currentValue.substr(0, maxLength));
|
|
126
130
|
}
|
|
127
131
|
}
|
|
128
132
|
|
|
129
133
|
if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
|
|
130
134
|
!regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
|
|
131
|
-
if (
|
|
132
|
-
|
|
135
|
+
if (change) {
|
|
136
|
+
change(currentValue);
|
|
133
137
|
}
|
|
134
138
|
}
|
|
135
139
|
};
|
|
@@ -152,7 +156,7 @@ export const Input = ({
|
|
|
152
156
|
if (value !== undefined && value !== null) {
|
|
153
157
|
setInnerValue(value);
|
|
154
158
|
if (type === 'tel') {
|
|
155
|
-
if (!phoneNumberRegex.test(
|
|
159
|
+
if (!phoneNumberRegex.test(value)) {
|
|
156
160
|
telErrorMessage && setInnerErrorMessage(telErrorMessage);
|
|
157
161
|
setInnerValue('');
|
|
158
162
|
} else {
|
|
@@ -296,7 +300,10 @@ export const Input = ({
|
|
|
296
300
|
{
|
|
297
301
|
innerErrorMessage ?
|
|
298
302
|
<P
|
|
303
|
+
errorAnimation={errorAnimation}
|
|
304
|
+
animation={animation}
|
|
299
305
|
style={{
|
|
306
|
+
margin: '0px',
|
|
300
307
|
left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
|
|
301
308
|
color: errorColor ? errorColor : configStyles.INPUT.errorColor,
|
|
302
309
|
fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
|
|
@@ -318,11 +325,11 @@ export const Input = ({
|
|
|
318
325
|
|
|
319
326
|
Input.propTypes = {
|
|
320
327
|
name: PropTypes.string,
|
|
328
|
+
change: PropTypes.func,
|
|
321
329
|
color: PropTypes.string,
|
|
322
330
|
value: PropTypes.string,
|
|
323
331
|
width: PropTypes.string,
|
|
324
332
|
label: PropTypes.string,
|
|
325
|
-
onChange: PropTypes.func,
|
|
326
333
|
required: PropTypes.bool,
|
|
327
334
|
disabled: PropTypes.bool,
|
|
328
335
|
height: PropTypes.string,
|
|
@@ -1,21 +1,27 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import { Input, InputTypes } from "./index";
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
5
|
component: Input,
|
|
6
6
|
title: "Components/Input",
|
|
7
7
|
argsType: {
|
|
8
|
-
|
|
8
|
+
change: {
|
|
9
9
|
control: { type: 'function' }
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
-
const Template = (args) =>
|
|
14
|
+
const Template = (args) => {
|
|
15
|
+
const [newVal, setNewVal] = useState('');
|
|
16
|
+
const handleChange = (val) => {
|
|
17
|
+
setNewVal(val);
|
|
18
|
+
console.log(val);
|
|
19
|
+
};
|
|
20
|
+
return <Input value={newVal} change={handleChange} {...args} />;
|
|
21
|
+
}
|
|
15
22
|
|
|
16
23
|
export const Default = Template.bind({});
|
|
17
24
|
Default.args = {
|
|
18
|
-
type: InputTypes.TEXT
|
|
19
|
-
onChange: (val) => {}
|
|
25
|
+
type: InputTypes.TEXT
|
|
20
26
|
};
|
|
21
27
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { NewAutocomplete } from './index';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
@@ -10,41 +10,41 @@ export default {
|
|
|
10
10
|
},
|
|
11
11
|
getItem: {
|
|
12
12
|
control: 'function'
|
|
13
|
+
},
|
|
14
|
+
change: {
|
|
15
|
+
control: 'function'
|
|
13
16
|
}
|
|
14
17
|
}
|
|
15
18
|
};
|
|
16
19
|
|
|
17
20
|
const Template = (args) => {
|
|
21
|
+
const [newOptions, setNewOptions] = useState([]);
|
|
18
22
|
const handleClick = (selected) => {
|
|
19
23
|
console.log(selected, 'selected');
|
|
20
24
|
};
|
|
21
25
|
|
|
22
|
-
|
|
26
|
+
const handleChange = (value) => {
|
|
27
|
+
fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${value}`, {
|
|
28
|
+
method: 'GET',
|
|
29
|
+
headers: {
|
|
30
|
+
'Content-Type': 'application/json',
|
|
31
|
+
'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImY2N2FjNmNiYjI2YWM3NTRhMDhhOTgxOTZkOTZjNjFjNWI3YTA1NzUyN2U4MGE3NzM0ZDJlOGFlZjNkMjY0ZmRiMGZkN2QwZjllZjA1MmE4IiwiaWF0IjoxNjgwNzYzMzU3LjUyMzI5OCwibmJmIjoxNjgwNzYzMzU3LjUyMzMwNSwiZXhwIjoxNjgwNzg4NTU3LjQ5NjQzLCJzdWIiOiJtaW5hc0BtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.XLp4N1C9XYnX8EITknJs-j684GkppCVrREA5ttTAEyloxCftJUEo6KQGp-2grZDZvWvwvsgD9NF5lecdPOIYuSEgp7NPgbAQ34-hRn0u6TGoC5LQI6Vjc_PijH9YoH2a2V9q58jAJrxSbwNjKsMixiHmAsahIKl_XRL1ZoDxpKDE23avnndCZZ9Fw_oe8ypkEscfgrpK9iT9EhxWXZWC9MJ-iAxHox6b6XWsVHkJg5oN5MApJt1h9h-oZQmrKNn_274z3evPChlrvSjTyqLzGWy3zlVUMgGQWBE5RsKiuUh1O3TsF4PYvANKp0a_urOFtU9Q-umyfFNlWfgoLsTtKIQE0xmlLi8Kr5OutSna-a0Eu2hzgTM47_x-cJb7ImokTxdgoh1DDODmLDKkfTTXhEQ-KNTQ4J5T8UDn6a11E6EzBEfJYOIv9eXz5bQBf5H14x4mzXEkHNeC10EAsUFH7b9JT8DPJISwazeAA5zloj39dVFVDLoJS2TvZAxMRLQuyoMSs7eEXp4i7TTWPyrDhMLJ-YUgxmbAhWfwQ9J1ULkLyzFCrmvUz4xPmeRp9gnUNCXOo52jjSVD8x5q3cokFhCEUuWP6fE_DSgChe18j5w75Xi7BjGAIHRJjYtyvJQHy0DIQf2qd6YbbKkyP4iW_PvLfJah9JTlOU1_QGhUWqc',
|
|
32
|
+
},
|
|
33
|
+
}).then((res)=> {
|
|
34
|
+
return res.json()
|
|
35
|
+
}).then((data)=> {
|
|
36
|
+
if (data.data.success === false) {
|
|
37
|
+
setNewOptions([]);
|
|
38
|
+
} else {
|
|
39
|
+
setNewOptions(data.data.companies);
|
|
40
|
+
}
|
|
41
|
+
console.log(data, 'data')
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
return <NewAutocomplete {...args} getItem={handleClick} options={newOptions} change={handleChange} />
|
|
23
46
|
};
|
|
24
47
|
export const Default = Template.bind({});
|
|
25
48
|
Default.args = {
|
|
26
|
-
searchCount: 3
|
|
27
|
-
options: [
|
|
28
|
-
{"bbb":"0", "value":"dfsag"},
|
|
29
|
-
{"bbb":"1", "value":"asdfgh"},
|
|
30
|
-
{"bbb":"2", "value":"ghjjjh"},
|
|
31
|
-
{"bbb":"3", "value":"qwembm"},
|
|
32
|
-
{"bbb":"4", "value":"ertmbn"},
|
|
33
|
-
{"bbb":"5", "value":"tyuvxvc"},
|
|
34
|
-
{"bbb":"6", "value":"uiozcvx"},
|
|
35
|
-
{"bbb":"7", "value":"jkljhdfg"},
|
|
36
|
-
{"bbb":"8", "value":"asdfghcxvbcb"},
|
|
37
|
-
{"bbb":"9", "value":"asdfghcxvkbcb"},
|
|
38
|
-
{"bbb":"10", "value":"asdfghcxkkvbcb"},
|
|
39
|
-
{"bbb":"11", "value":"asdfghcxvmmmbcb"},
|
|
40
|
-
{"bbb":"12", "value":"asdfghcxkhjvbcb"},
|
|
41
|
-
{"bbb":"13", "value":"asdfghcxhjkvbcsb"},
|
|
42
|
-
{"bbb":"14", "value":"asdfghcxvbzxccxzcb"},
|
|
43
|
-
{"bbb":"15", "value":"asdfghcxjklljklvbcb"},
|
|
44
|
-
{"bbb":"16", "value":"asdfghcxvbljkljkljkcb"},
|
|
45
|
-
{"bbb":"17", "value":"asdfghcxljkljkljkljvbcb"},
|
|
46
|
-
{"bbb":"18", "value":"asdfghcxiouiouiouiouovbcb"},
|
|
47
|
-
{"bbb":"19", "value":"asdfghcuoiouiouiouiouxvbcb"},
|
|
48
|
-
{"bbb":"20", "value":"asdfghcuiouiouioiouiouixvbcb"}
|
|
49
|
-
]
|
|
49
|
+
searchCount: 3
|
|
50
50
|
}
|
|
@@ -7,6 +7,7 @@ import { compereConfigs } from './../../utils';
|
|
|
7
7
|
|
|
8
8
|
export const NewAutocomplete = ({
|
|
9
9
|
label,
|
|
10
|
+
change,
|
|
10
11
|
options,
|
|
11
12
|
getItem,
|
|
12
13
|
required,
|
|
@@ -80,6 +81,7 @@ export const NewAutocomplete = ({
|
|
|
80
81
|
const [isHover, setIsHover] = useState(false);
|
|
81
82
|
const [isFocus, setIsFocus] = useState(false);
|
|
82
83
|
const [innerValue, setInnerValue] = useState('');
|
|
84
|
+
const [innerOptions, setInnerOptions] = useState([]);
|
|
83
85
|
const configStyles = compereConfigs();
|
|
84
86
|
|
|
85
87
|
const showOption = keyframes`
|
|
@@ -122,124 +124,137 @@ export const NewAutocomplete = ({
|
|
|
122
124
|
const value = e.target.value;
|
|
123
125
|
value.length > 0 ? setShow(true) : setShow(false);
|
|
124
126
|
setInnerValue(value);
|
|
127
|
+
if (value.length >= searchCount) {
|
|
128
|
+
change(value);
|
|
129
|
+
} else {
|
|
130
|
+
change('');
|
|
131
|
+
}
|
|
125
132
|
};
|
|
126
133
|
|
|
127
134
|
const handleClick = (selectedValue) => {
|
|
128
135
|
setShow(false);
|
|
129
136
|
getItem(selectedValue);
|
|
130
|
-
setInnerValue(selectedValue.
|
|
137
|
+
setInnerValue(selectedValue.name);
|
|
131
138
|
};
|
|
132
139
|
|
|
133
140
|
const optionList = (
|
|
134
141
|
<>
|
|
135
142
|
{
|
|
136
|
-
show &&
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
:
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
: <p
|
|
143
|
+
show && innerOptions
|
|
144
|
+
?
|
|
145
|
+
innerOptions.length > 0
|
|
146
|
+
?
|
|
147
|
+
<div
|
|
148
|
+
style={{
|
|
149
|
+
left: contentBottomLeft ? contentBottomLeft : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
|
|
150
|
+
width: contentBottomWidth ? contentBottomWidth : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
|
|
151
|
+
zIndex: contentBottomZindex ? contentBottomZindex : configStyles.NEWAUTOCOMPLETE.contentBottomZindex,
|
|
152
|
+
borderRadius: contentBottomRadius ? contentBottomRadius : configStyles.NEWAUTOCOMPLETE.contentBottomRadius,
|
|
153
|
+
maxWidth: contentBottomMaxWidth ? contentBottomMaxWidth : configStyles.NEWAUTOCOMPLETE.contentBottomMaxWidth,
|
|
154
|
+
overflow: contentBottomOverflow ? contentBottomOverflow : configStyles.NEWAUTOCOMPLETE.contentBottomOverflow,
|
|
155
|
+
position: contentBottomPosition ? contentBottomPosition : configStyles.NEWAUTOCOMPLETE.contentBottomPosition,
|
|
156
|
+
minHeight: contentBottomMinHeight ? contentBottomMinHeight : configStyles.NEWAUTOCOMPLETE.contentBottomMinHeight,
|
|
157
|
+
boxShadow: contentBottomBoxShadow ? contentBottomBoxShadow : configStyles.NEWAUTOCOMPLETE.contentBottomBoxShadow,
|
|
158
|
+
backgroundColor: contentBottomBackgroundColor ? contentBottomBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomBackgroundColor,
|
|
159
|
+
top: contentTopHeight ?
|
|
160
|
+
contentTopHeight.includes('rem') ?
|
|
161
|
+
parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 3)) + 0.6 + 'rem' :
|
|
162
|
+
parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 2)) + 6 + 'px'
|
|
163
|
+
: configStyles.NEWAUTOCOMPLETE.contentTopHeight.includes('rem') ?
|
|
164
|
+
parseFloat(configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(0, configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 3)) + 0.6 + 'rem' :
|
|
165
|
+
parseFloat(configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(0, configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 2)) + 6 + 'px',
|
|
166
|
+
animation
|
|
167
|
+
}}
|
|
168
|
+
>
|
|
169
|
+
<div
|
|
170
|
+
style={{
|
|
171
|
+
display: contentBottomInnerDisplay ? contentBottomInnerDisplay : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDisplay,
|
|
172
|
+
overflowY: contentBottomInnerOverflowY ? contentBottomInnerOverflowY : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowY,
|
|
173
|
+
overflowX: contentBottomInnerOverflowX ? contentBottomInnerOverflowX : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowX,
|
|
174
|
+
maxHeight: contentBottomInnerMaxHeight ? contentBottomInnerMaxHeight : configStyles.NEWAUTOCOMPLETE.contentBottomInnerMaxHeight,
|
|
175
|
+
flexDirection: contentBottomInnerDirection ? contentBottomInnerDirection : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDirection
|
|
176
|
+
}}
|
|
177
|
+
>
|
|
178
|
+
{
|
|
179
|
+
innerOptions.map(item => {
|
|
180
|
+
return (
|
|
181
|
+
<p
|
|
182
|
+
key={item.id}
|
|
183
|
+
onMouseEnter={handleRowMouseEnter}
|
|
184
|
+
onMouseLeave={handleRowMouseLeave}
|
|
185
|
+
onClick={() => handleClick(item)}
|
|
186
|
+
style={{
|
|
187
|
+
flexShrink: 0,
|
|
188
|
+
color: contentBottomRowColor ? contentBottomRowColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowColor,
|
|
189
|
+
height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
|
|
190
|
+
cursor: contentBottomRowCursor ? contentBottomRowCursor : configStyles.NEWAUTOCOMPLETE.contentBottomRowCursor,
|
|
191
|
+
display: contentBottomRowDisplay ? contentBottomRowDisplay : configStyles.NEWAUTOCOMPLETE.contentBottomRowDisplay,
|
|
192
|
+
padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
|
|
193
|
+
fontSize: contentBottomRowFontSize ? contentBottomRowFontSize : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontSize,
|
|
194
|
+
boxSizing: contentBottomRowBoxSizing ? contentBottomRowBoxSizing : configStyles.NEWAUTOCOMPLETE.contentBottomRowBoxSizing,
|
|
195
|
+
fontWeight: contentBottomRowFontWeight ? contentBottomRowFontWeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontWeight,
|
|
196
|
+
lineHeight: contentBottomRowLineHeight ? contentBottomRowLineHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowLineHeight,
|
|
197
|
+
alignItems: contentBottomRowAlignItems ? contentBottomRowAlignItems : configStyles.NEWAUTOCOMPLETE.contentBottomRowAlignItems,
|
|
198
|
+
transition: contentBottomRowTransition ? contentBottomRowTransition : configStyles.NEWAUTOCOMPLETE.contentBottomRowTransition,
|
|
199
|
+
marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
|
|
200
|
+
backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
|
|
201
|
+
}}
|
|
202
|
+
>
|
|
203
|
+
{item.name}
|
|
204
|
+
</p>
|
|
205
|
+
)
|
|
206
|
+
})
|
|
207
|
+
}
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
: innerOptions.length <= 0
|
|
211
|
+
?
|
|
212
|
+
<p
|
|
207
213
|
style={{
|
|
214
|
+
margin: '0px',
|
|
208
215
|
color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
|
|
209
216
|
fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
|
|
210
217
|
height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
|
|
211
218
|
padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
|
|
212
|
-
lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight
|
|
219
|
+
lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
|
|
220
|
+
backgroundColor: contentBottomBackgroundColor ? contentBottomBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomBackgroundColor,
|
|
213
221
|
}}
|
|
214
222
|
>
|
|
215
|
-
{
|
|
223
|
+
{
|
|
224
|
+
innerValue.length >= searchCount
|
|
225
|
+
? 'Նման տվյալ առկա չէ'
|
|
226
|
+
: `Լրացնել առնվազն ${searchCount} նիշ`
|
|
227
|
+
}
|
|
216
228
|
</p>
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
</div>
|
|
229
|
+
: ''
|
|
230
|
+
: ''
|
|
220
231
|
}
|
|
221
232
|
</>
|
|
222
233
|
);
|
|
223
234
|
|
|
224
235
|
useEffect(() => {
|
|
225
|
-
if (
|
|
226
|
-
alert('Please add
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
if (options.length === 0) {
|
|
230
|
-
alert('Please fill options array');
|
|
236
|
+
if (options === undefined) {
|
|
237
|
+
alert('Please add options prop');
|
|
231
238
|
}
|
|
232
239
|
|
|
233
240
|
options && options.length > 0 && options.map(item => {
|
|
234
|
-
if (!item.hasOwnProperty('
|
|
235
|
-
alert('Please add
|
|
241
|
+
if (!item.hasOwnProperty('name')) {
|
|
242
|
+
alert('Please add name property in items of options array');
|
|
236
243
|
}
|
|
237
244
|
});
|
|
238
245
|
|
|
239
246
|
if (!getItem) {
|
|
240
247
|
alert('Please add getItem function for get choosen item from autocomplete');
|
|
241
248
|
}
|
|
242
|
-
|
|
249
|
+
|
|
250
|
+
options && setInnerOptions(options);
|
|
251
|
+
}, [options, options.length, getItem]);
|
|
252
|
+
|
|
253
|
+
useEffect(() => {
|
|
254
|
+
if (!change) {
|
|
255
|
+
alert('Please add change prop on New Autocomplete component');
|
|
256
|
+
}
|
|
257
|
+
}, [change]);
|
|
243
258
|
|
|
244
259
|
return (
|
|
245
260
|
<>
|
|
@@ -252,8 +267,9 @@ export const NewAutocomplete = ({
|
|
|
252
267
|
display: labelDisplay ? labelDisplay : configStyles.NEWAUTOCOMPLETE.labelDisplay,
|
|
253
268
|
fontWeight: labelWeight ? labelWeight : configStyles.NEWAUTOCOMPLETE.labelWeight,
|
|
254
269
|
lineHeight: labelLineHeight ? labelLineHeight : configStyles.NEWAUTOCOMPLETE.labelLineHeight,
|
|
270
|
+
maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
|
|
255
271
|
marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
|
|
256
|
-
textTransform: labelTextTransform ? labelTextTransform : configStyles.NEWAUTOCOMPLETE.labelTextTransform
|
|
272
|
+
textTransform: labelTextTransform ? labelTextTransform : configStyles.NEWAUTOCOMPLETE.labelTextTransform,
|
|
257
273
|
}}
|
|
258
274
|
>
|
|
259
275
|
{label}
|
|
@@ -271,7 +287,8 @@ export const NewAutocomplete = ({
|
|
|
271
287
|
style={{
|
|
272
288
|
display: contentDisplay ? contentDisplay : configStyles.NEWAUTOCOMPLETE.contentDisplay,
|
|
273
289
|
position: contentPosition ? contentPosition : configStyles.NEWAUTOCOMPLETE.contentPosition,
|
|
274
|
-
flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection
|
|
290
|
+
flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection,
|
|
291
|
+
maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
|
|
275
292
|
}}
|
|
276
293
|
>
|
|
277
294
|
<input
|
|
@@ -281,11 +298,12 @@ export const NewAutocomplete = ({
|
|
|
281
298
|
onBlur={handleBlur}
|
|
282
299
|
onFocus={handleFocus}
|
|
283
300
|
onInput={handleChange}
|
|
284
|
-
placeholder={placeHolder ? placeHolder : ''}
|
|
285
|
-
autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
|
|
286
301
|
onMouseEnter={handleMouseEnter}
|
|
287
302
|
onMouseLeave={handleMouseLeave}
|
|
303
|
+
placeholder={placeHolder ? placeHolder : ''}
|
|
304
|
+
autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
|
|
288
305
|
style={{
|
|
306
|
+
maxWidth: '100%',
|
|
289
307
|
transition: 'all 240ms',
|
|
290
308
|
cursor: disabled ? 'not-allowed' : 'auto',
|
|
291
309
|
color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
|
|
@@ -296,7 +314,6 @@ export const NewAutocomplete = ({
|
|
|
296
314
|
display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
|
|
297
315
|
fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
|
|
298
316
|
borderRadius: contentTopRadius ? contentTopRadius : configStyles.NEWAUTOCOMPLETE.contentTopRadius,
|
|
299
|
-
maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
|
|
300
317
|
boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
|
|
301
318
|
lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
|
|
302
319
|
flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
|
|
@@ -313,8 +330,11 @@ export const NewAutocomplete = ({
|
|
|
313
330
|
errorMessage
|
|
314
331
|
? <span
|
|
315
332
|
style={{
|
|
333
|
+
margin: '0px',
|
|
334
|
+
display: 'inline-block',
|
|
316
335
|
color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
|
|
317
|
-
fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize
|
|
336
|
+
fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
|
|
337
|
+
maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
|
|
318
338
|
}}
|
|
319
339
|
>
|
|
320
340
|
{errorMessage}
|
|
@@ -349,6 +369,7 @@ NewAutocomplete.propTypes = {
|
|
|
349
369
|
contentPosition: PropTypes.string,
|
|
350
370
|
labelLineHeight: PropTypes.string,
|
|
351
371
|
contentTopColor: PropTypes.string,
|
|
372
|
+
change: PropTypes.func.isRequired,
|
|
352
373
|
contentDirection: PropTypes.string,
|
|
353
374
|
contentTopWeight: PropTypes.number,
|
|
354
375
|
contentTopRadius: PropTypes.string,
|