@xaypay/tui 0.0.31 → 0.0.33

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.es.js +25 -13
  2. package/dist/index.js +24 -12
  3. package/package.json +1 -1
  4. package/src/components/select/index.js +59 -39
  5. package/src/components/select/select.stories.js +1 -1
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect, useMemo } from 'react';
1
+ import React, { useState, useEffect, useMemo, useRef } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import classnames from 'classnames';
4
4
  import styled from 'styled-components';
@@ -842,12 +842,26 @@ const Select = ({
842
842
  selected
843
843
  }) => {
844
844
  const options = jsonData.length ? JSON.parse(jsonData) : [];
845
+ const ref = useRef();
845
846
  let [opened, setOpened] = useState(false);
846
847
  let [newSelected, setNewSelected] = useState({});
847
848
  useEffect(() => {
848
849
  const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
849
850
  setNewSelected(parseSelectedData);
850
851
  }, [selected]);
852
+ useEffect(() => {
853
+ if (opened) {
854
+ const checkIfClickedOutside = e => {
855
+ if (opened && ref.current && !ref.current.contains(e.target)) {
856
+ setOpened(false);
857
+ }
858
+ };
859
+ document.addEventListener("mousedown", checkIfClickedOutside);
860
+ return () => {
861
+ document.removeEventListener("mousedown", checkIfClickedOutside);
862
+ };
863
+ }
864
+ }, [opened]);
851
865
  classnames(styles$3[theme], styles$3[size], {
852
866
  [styles$3.disabled]: disabled,
853
867
  [styles$3.required]: required
@@ -855,7 +869,8 @@ const Select = ({
855
869
  return /*#__PURE__*/React.createElement("div", null, label ? /*#__PURE__*/React.createElement("label", {
856
870
  className: styles$3['select-title']
857
871
  }, label) : "", /*#__PURE__*/React.createElement("div", {
858
- className: styles$3['select-wrap']
872
+ className: styles$3['select-wrap'],
873
+ ref: ref
859
874
  }, /*#__PURE__*/React.createElement("div", {
860
875
  className: styles$3['select-content'],
861
876
  id: styles$3.selector
@@ -868,22 +883,19 @@ const Select = ({
868
883
  className: styles$3['select-content-top-text']
869
884
  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React.createElement("div", {
870
885
  className: styles$3['select-content-top-icon']
871
- }, /*#__PURE__*/React.createElement(Icon, {
886
+ }, Object.keys(newSelected).length > 0 && /*#__PURE__*/React.createElement("span", {
887
+ onClick: e => {
888
+ setNewSelected({});
889
+ onChange({});
890
+ e.stopPropagation();
891
+ }
892
+ }, "X"), /*#__PURE__*/React.createElement("i", {
872
893
  className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
873
894
  }))), opened && !disabled ? /*#__PURE__*/React.createElement("div", {
874
895
  className: styles$3['select-content-bottom']
875
896
  }, /*#__PURE__*/React.createElement("div", {
876
897
  className: styles$3['select-content-bottom-inner']
877
- }, /*#__PURE__*/React.createElement("div", {
878
- className: styles$3['select-content-bottom-row'],
879
- onClick: () => {
880
- if (!required && !selected) {
881
- setNewSelected(defaultOption);
882
- onChange(defaultOption);
883
- setOpened(!opened);
884
- }
885
- }
886
- }, defaultOption), options.map((option, i) => {
898
+ }, options.map((option, i) => {
887
899
  return /*#__PURE__*/React.createElement("div", {
888
900
  key: i,
889
901
  className: styles$3['select-content-bottom-row'],
package/dist/index.js CHANGED
@@ -853,12 +853,26 @@ const Select = ({
853
853
  selected
854
854
  }) => {
855
855
  const options = jsonData.length ? JSON.parse(jsonData) : [];
856
+ const ref = React.useRef();
856
857
  let [opened, setOpened] = React.useState(false);
857
858
  let [newSelected, setNewSelected] = React.useState({});
858
859
  React.useEffect(() => {
859
860
  const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
860
861
  setNewSelected(parseSelectedData);
861
862
  }, [selected]);
863
+ React.useEffect(() => {
864
+ if (opened) {
865
+ const checkIfClickedOutside = e => {
866
+ if (opened && ref.current && !ref.current.contains(e.target)) {
867
+ setOpened(false);
868
+ }
869
+ };
870
+ document.addEventListener("mousedown", checkIfClickedOutside);
871
+ return () => {
872
+ document.removeEventListener("mousedown", checkIfClickedOutside);
873
+ };
874
+ }
875
+ }, [opened]);
862
876
  classnames__default["default"](styles$3[theme], styles$3[size], {
863
877
  [styles$3.disabled]: disabled,
864
878
  [styles$3.required]: required
@@ -866,7 +880,8 @@ const Select = ({
866
880
  return /*#__PURE__*/React__default["default"].createElement("div", null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
867
881
  className: styles$3['select-title']
868
882
  }, label) : "", /*#__PURE__*/React__default["default"].createElement("div", {
869
- className: styles$3['select-wrap']
883
+ className: styles$3['select-wrap'],
884
+ ref: ref
870
885
  }, /*#__PURE__*/React__default["default"].createElement("div", {
871
886
  className: styles$3['select-content'],
872
887
  id: styles$3.selector
@@ -879,22 +894,19 @@ const Select = ({
879
894
  className: styles$3['select-content-top-text']
880
895
  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
881
896
  className: styles$3['select-content-top-icon']
882
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
897
+ }, Object.keys(newSelected).length > 0 && /*#__PURE__*/React__default["default"].createElement("span", {
898
+ onClick: e => {
899
+ setNewSelected({});
900
+ onChange({});
901
+ e.stopPropagation();
902
+ }
903
+ }, "X"), /*#__PURE__*/React__default["default"].createElement("i", {
883
904
  className: opened ? 'icon-arrow-up' : 'icon-arrow-down'
884
905
  }))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
885
906
  className: styles$3['select-content-bottom']
886
907
  }, /*#__PURE__*/React__default["default"].createElement("div", {
887
908
  className: styles$3['select-content-bottom-inner']
888
- }, /*#__PURE__*/React__default["default"].createElement("div", {
889
- className: styles$3['select-content-bottom-row'],
890
- onClick: () => {
891
- if (!required && !selected) {
892
- setNewSelected(defaultOption);
893
- onChange(defaultOption);
894
- setOpened(!opened);
895
- }
896
- }
897
- }, defaultOption), options.map((option, i) => {
909
+ }, options.map((option, i) => {
898
910
  return /*#__PURE__*/React__default["default"].createElement("div", {
899
911
  key: i,
900
912
  className: styles$3['select-content-bottom-row'],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.31",
3
+ "version": "0.0.33",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/select/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, {useEffect, useState} from 'react';
1
+ import React, {useEffect, useState, useRef} from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import classnames from 'classnames';
4
4
  import styles from './select.module.css';
@@ -35,10 +35,10 @@ export const Select = ({
35
35
  keyNames,
36
36
  selected
37
37
  }) => {
38
- const options = jsonData.length ? JSON.parse(jsonData) : [];
39
38
 
39
+ const options = jsonData.length ? JSON.parse(jsonData) : [];
40
+ const ref = useRef();
40
41
 
41
-
42
42
  let [opened, setOpened] = useState(false)
43
43
  let [newSelected, setNewSelected] = useState({})
44
44
 
@@ -48,6 +48,20 @@ export const Select = ({
48
48
  setNewSelected(parseSelectedData);
49
49
  },[selected])
50
50
 
51
+ useEffect(() => {
52
+ if(opened){
53
+ const checkIfClickedOutside = e => {
54
+ if (opened && ref.current && !ref.current.contains(e.target)) {
55
+ setOpened(false)
56
+ }
57
+ };
58
+ document.addEventListener("mousedown", checkIfClickedOutside)
59
+ return () => {
60
+ document.removeEventListener("mousedown", checkIfClickedOutside)
61
+ }
62
+ }
63
+ }, [opened]);
64
+
51
65
  const classProps = classnames(
52
66
  styles[theme],
53
67
  styles[size],
@@ -57,11 +71,11 @@ export const Select = ({
57
71
  },
58
72
  className
59
73
  );
60
-
74
+
61
75
  return (
62
76
  <div>
63
77
  {label ? <label className={styles['select-title']}>{label}</label> : ""}
64
- <div className={styles['select-wrap']}>
78
+ <div className={styles['select-wrap']} ref={ref}>
65
79
  <div className={styles['select-content']} id={styles.selector}>
66
80
  <div
67
81
  className={styles['select-content-top']}
@@ -71,51 +85,57 @@ export const Select = ({
71
85
  >
72
86
  <div className={styles['select-content-top-text']}>{newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption}</div>
73
87
  <div className={styles['select-content-top-icon']}>
74
- <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'}/>
88
+ {Object.keys(newSelected).length > 0 &&
89
+ <span onClick={
90
+ (e) => {
91
+ setNewSelected({})
92
+ onChange({});
93
+ e.stopPropagation()
94
+ }
95
+ }>X</span>
96
+ }
97
+ <i className={opened ? 'icon-arrow-up' : 'icon-arrow-down'}/>
75
98
  </div>
76
99
  </div>
77
100
  {
78
101
  opened && !disabled ?
79
-
80
- <div className={styles['select-content-bottom']}>
81
- <div className={styles['select-content-bottom-inner']}>
82
- <div
83
- className={styles['select-content-bottom-row']}
84
- onClick={() => {
85
- if (!required && !selected) {
86
- setNewSelected(defaultOption)
87
- onChange(defaultOption)
88
- setOpened(!opened)
89
- }
90
- }
91
- }
92
- >
93
- {defaultOption}
94
- </div>
95
- {
96
- options.map((option, i) => {
97
- return <div
98
- key={i}
102
+ <div className={styles['select-content-bottom']}>
103
+ <div className={styles['select-content-bottom-inner']}>
104
+ {/* <div
99
105
  className={styles['select-content-bottom-row']}
100
- disabled={true}
101
106
  onClick={() => {
102
- setNewSelected(option);
103
- onChange(option);
104
- setOpened(!opened);
107
+ if (!required && !selected) {
108
+ setNewSelected(defaultOption)
109
+ onChange(defaultOption)
110
+ setOpened(!opened)
111
+ }
112
+ }
105
113
  }
114
+ >
115
+ {defaultOption}
116
+ </div> */}
117
+ {
118
+ options.map((option, i) => {
119
+ return <div
120
+ key={i}
121
+ className={styles['select-content-bottom-row']}
122
+ disabled={true}
123
+ onClick={() => {
124
+ setNewSelected(option);
125
+ onChange(option);
126
+ setOpened(!opened);
127
+ }
128
+ }
129
+ defaultValue={option[keyNames.id]}
130
+ >
131
+ {option[keyNames.name]}
132
+ </div>
133
+ })
106
134
  }
107
- defaultValue={option[keyNames.id]}
108
- >
109
- {option[keyNames.name]}
110
- </div>
111
- })
112
- }
135
+ </div>
113
136
  </div>
114
-
115
- </div>
116
137
  : null
117
138
  }
118
-
119
139
  </div>
120
140
  </div>
121
141
  {eMessage ? <span className={styles.eMessage}>{eMessage}</span> : null}
package/src/components/select/select.stories.js CHANGED
@@ -14,7 +14,7 @@ Default.args = {
14
14
  jsonData: '[{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}]',
15
15
  onChange: (newValue)=> {
16
16
  },
17
- defaultOption: 'ընտրել',
17
+ defaultOption: '',
18
18
  selected: '{"bbb":"2", "value":"Մալաթիա"}',
19
19
  keyNames: {name: 'value', id : 'bbb'}
20
20
  };