@xaypay/tui 0.0.42 → 0.0.45

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 CHANGED
@@ -144,6 +144,7 @@ const TypographyType = {
144
144
  i: 'i'
145
145
  };
146
146
  const Typography = ({
147
+ onClick,
147
148
  variant,
148
149
  className,
149
150
  color,
@@ -168,17 +169,20 @@ const Typography = ({
168
169
  ${bold ? 'font-weight: bold;' : ''}
169
170
  `;
170
171
  return /*#__PURE__*/React.createElement(StyledTypograpy, {
171
- className: classProps
172
+ className: classProps,
173
+ onClick: onClick
172
174
  }, " ", children, " ");
173
175
  };
174
176
  Typography.propTypes = {
175
177
  variant: PropTypes.oneOf(Object.values(TypographyType)),
176
178
  className: PropTypes.string,
177
179
  bold: PropTypes.bool,
178
- color: PropTypes.string
180
+ color: PropTypes.string,
181
+ onClick: PropTypes.func
179
182
  };
180
183
  Typography.defaultProps = {
181
- variant: 'h1'
184
+ variant: 'h1',
185
+ onClick: () => {}
182
186
  };
183
187
 
184
188
  var css_248z$b = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}";
@@ -281,7 +285,6 @@ const Autocomplate = ({
281
285
  id: inputId,
282
286
  type: "text",
283
287
  className: styles$a['autocomplate-content-top'],
284
- required: required,
285
288
  disabled: disabled,
286
289
  onChange: handleChange,
287
290
  onClick: () => {
@@ -963,15 +966,22 @@ const File = ({
963
966
  }) => {
964
967
  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
965
968
  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
966
- const [error, setError] = useState(errorMesage);
969
+ const [error, setError] = useState('');
967
970
  const [fileName, setFileName] = useState('no selected file');
968
971
  function fileType(file) {
969
- if (file.size <= 5000000) {
970
- if (file.type === 'image/jpeg' || file.type === 'image/png') {
971
- setImage(URL.createObjectURL(file));
972
+ if (file[0].size <= 5000000) {
973
+ if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
974
+ setFileName(file[0].name);
975
+ setImage(URL.createObjectURL(file[0]));
976
+ onChange({
977
+ file
978
+ });
972
979
  setError('');
973
- } else if (file.type === 'application/pdf') {
980
+ } else if (file[0].type === 'application/pdf') {
974
981
  setImage(pdfImageName);
982
+ onChange({
983
+ file
984
+ });
975
985
  setError('');
976
986
  } else {
977
987
  setImage(null);
@@ -997,7 +1007,7 @@ const File = ({
997
1007
  onChange: e => {
998
1008
  console.log(e);
999
1009
  },
1000
- style: error ? {
1010
+ style: error || errorMesage ? {
1001
1011
  borderColor: 'red'
1002
1012
  } : {},
1003
1013
  onClick: () => {
@@ -1013,14 +1023,8 @@ const File = ({
1013
1023
  files
1014
1024
  }
1015
1025
  }) => {
1016
- onChange({
1017
- target: {
1018
- files
1019
- }
1020
- });
1021
- files[0] && setFileName(files[0].name);
1022
1026
  if (files[0]) {
1023
- fileType(files[0]);
1027
+ fileType(files);
1024
1028
  }
1025
1029
  }
1026
1030
  }), image ? /*#__PURE__*/React.createElement("div", {
@@ -1051,11 +1055,11 @@ const File = ({
1051
1055
  }
1052
1056
  }, /*#__PURE__*/React.createElement("i", {
1053
1057
  className: "icon-delete"
1054
- })), error ? /*#__PURE__*/React.createElement("span", {
1058
+ })), errorMesage || error ? /*#__PURE__*/React.createElement("span", {
1055
1059
  style: {
1056
1060
  color: 'red'
1057
1061
  }
1058
- }, error) : null));
1062
+ }, errorMesage || error) : null));
1059
1063
  };
1060
1064
  File.propTypes = {
1061
1065
  className: PropTypes.string,
@@ -1070,7 +1074,7 @@ File.defaultProps = {
1070
1074
  required: false
1071
1075
  };
1072
1076
 
1073
- var css_248z$1 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
1077
+ var css_248z$1 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
1074
1078
  var styles$1 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
1075
1079
  styleInject(css_248z$1);
1076
1080
 
package/dist/index.js CHANGED
@@ -155,6 +155,7 @@ const TypographyType = {
155
155
  i: 'i'
156
156
  };
157
157
  const Typography = ({
158
+ onClick,
158
159
  variant,
159
160
  className,
160
161
  color,
@@ -179,17 +180,20 @@ const Typography = ({
179
180
  ${bold ? 'font-weight: bold;' : ''}
180
181
  `;
181
182
  return /*#__PURE__*/React__default["default"].createElement(StyledTypograpy, {
182
- className: classProps
183
+ className: classProps,
184
+ onClick: onClick
183
185
  }, " ", children, " ");
184
186
  };
185
187
  Typography.propTypes = {
186
188
  variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)),
187
189
  className: PropTypes__default["default"].string,
188
190
  bold: PropTypes__default["default"].bool,
189
- color: PropTypes__default["default"].string
191
+ color: PropTypes__default["default"].string,
192
+ onClick: PropTypes__default["default"].func
190
193
  };
191
194
  Typography.defaultProps = {
192
- variant: 'h1'
195
+ variant: 'h1',
196
+ onClick: () => {}
193
197
  };
194
198
 
195
199
  var css_248z$b = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}";
@@ -292,7 +296,6 @@ const Autocomplate = ({
292
296
  id: inputId,
293
297
  type: "text",
294
298
  className: styles$a['autocomplate-content-top'],
295
- required: required,
296
299
  disabled: disabled,
297
300
  onChange: handleChange,
298
301
  onClick: () => {
@@ -974,15 +977,22 @@ const File = ({
974
977
  }) => {
975
978
  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
976
979
  const [image, setImage] = React.useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
977
- const [error, setError] = React.useState(errorMesage);
980
+ const [error, setError] = React.useState('');
978
981
  const [fileName, setFileName] = React.useState('no selected file');
979
982
  function fileType(file) {
980
- if (file.size <= 5000000) {
981
- if (file.type === 'image/jpeg' || file.type === 'image/png') {
982
- setImage(URL.createObjectURL(file));
983
+ if (file[0].size <= 5000000) {
984
+ if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
985
+ setFileName(file[0].name);
986
+ setImage(URL.createObjectURL(file[0]));
987
+ onChange({
988
+ file
989
+ });
983
990
  setError('');
984
- } else if (file.type === 'application/pdf') {
991
+ } else if (file[0].type === 'application/pdf') {
985
992
  setImage(pdfImageName);
993
+ onChange({
994
+ file
995
+ });
986
996
  setError('');
987
997
  } else {
988
998
  setImage(null);
@@ -1008,7 +1018,7 @@ const File = ({
1008
1018
  onChange: e => {
1009
1019
  console.log(e);
1010
1020
  },
1011
- style: error ? {
1021
+ style: error || errorMesage ? {
1012
1022
  borderColor: 'red'
1013
1023
  } : {},
1014
1024
  onClick: () => {
@@ -1024,14 +1034,8 @@ const File = ({
1024
1034
  files
1025
1035
  }
1026
1036
  }) => {
1027
- onChange({
1028
- target: {
1029
- files
1030
- }
1031
- });
1032
- files[0] && setFileName(files[0].name);
1033
1037
  if (files[0]) {
1034
- fileType(files[0]);
1038
+ fileType(files);
1035
1039
  }
1036
1040
  }
1037
1041
  }), image ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1062,11 +1066,11 @@ const File = ({
1062
1066
  }
1063
1067
  }, /*#__PURE__*/React__default["default"].createElement("i", {
1064
1068
  className: "icon-delete"
1065
- })), error ? /*#__PURE__*/React__default["default"].createElement("span", {
1069
+ })), errorMesage || error ? /*#__PURE__*/React__default["default"].createElement("span", {
1066
1070
  style: {
1067
1071
  color: 'red'
1068
1072
  }
1069
- }, error) : null));
1073
+ }, errorMesage || error) : null));
1070
1074
  };
1071
1075
  File.propTypes = {
1072
1076
  className: PropTypes__default["default"].string,
@@ -1081,7 +1085,7 @@ File.defaultProps = {
1081
1085
  required: false
1082
1086
  };
1083
1087
 
1084
- var css_248z$1 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 24px;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
1088
+ var css_248z$1 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
1085
1089
  var styles$1 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
1086
1090
  styleInject(css_248z$1);
1087
1091
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.42",
3
+ "version": "0.0.45",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
@@ -97,7 +97,6 @@ export const Autocomplate = ({
97
97
  id={inputId}
98
98
  type="text"
99
99
  className={styles['autocomplate-content-top']}
100
- required={required}
101
100
  disabled={disabled}
102
101
  onChange={handleChange}
103
102
  onClick={() => { setShowOptions(!showOptions) }}
@@ -19,17 +19,20 @@ export const File = ({
19
19
  const [image, setImage] = useState(defaultData ?
20
20
  defaultData.type != 'application/pdf' ?
21
21
  defaultData.url : pdfImageName : null);
22
- const [error, setError] = useState(errorMesage);
22
+ const [error, setError] = useState('');
23
23
  const [fileName, setFileName] = useState('no selected file');
24
24
  function fileType(file) {
25
- if (file.size <= 5000000) {
26
- if (file.type === 'image/jpeg' || file.type === 'image/png') {
27
- setImage(URL.createObjectURL(file))
25
+ if (file[0].size <= 5000000) {
26
+ if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
27
+ setFileName(file[0].name)
28
+ setImage(URL.createObjectURL(file[0]))
29
+ onChange({file})
28
30
  setError('')
29
31
 
30
32
  }
31
- else if (file.type === 'application/pdf') {
33
+ else if (file[0].type === 'application/pdf') {
32
34
  setImage(pdfImageName)
35
+ onChange({file})
33
36
  setError('')
34
37
 
35
38
  }
@@ -53,17 +56,15 @@ export const File = ({
53
56
  <div
54
57
  className={styles['file-form']}
55
58
  onChange={(e) => { console.log(e) }}
56
- style={error ? { borderColor: 'red' } : {}}
59
+ style={error || errorMesage ? { borderColor: 'red' } : {}}
57
60
  onClick={() => {
58
61
  document.querySelector(`.${name}`).click()
59
62
  }}
60
63
  >
61
64
  <input type='file' className={name} hidden disabled={disabled}
62
- onChange={({ target: { files } }) => {
63
- onChange({ target: { files } })
64
- files[0] && setFileName(files[0].name)
65
+ onChange={({ target: { files } }) => {
65
66
  if (files[0]) {
66
- fileType(files[0])
67
+ fileType(files)
67
68
  }
68
69
  }}
69
70
  />
@@ -92,7 +93,7 @@ export const File = ({
92
93
  <i className="icon-delete"/>
93
94
  </div>
94
95
  {
95
- error ? <span style={{ color: 'red' }}>{error}</span> : null
96
+ errorMesage || error ? <span style={{ color: 'red' }}>{errorMesage || error}</span> : null
96
97
  }
97
98
  </div>
98
99
  </>
@@ -10,7 +10,7 @@
10
10
  .modal-top {
11
11
  display: flex;
12
12
  flex-direction: row;
13
- padding: 4px 10px 4px 24px;
13
+ padding: 4px 10px 4px 0;
14
14
  width: 100%;
15
15
  background: #fbfbfb;
16
16
  height: 44px;
@@ -18,7 +18,7 @@ export const TypographyType = {
18
18
 
19
19
 
20
20
 
21
- export const Typography = ({ variant, className, color, bold, children, ...props }) => {
21
+ export const Typography = ({onClick, variant, className, color, bold, children, ...props }) => {
22
22
  const classProps = classnames(className,bold ? 'bold': '');
23
23
  const CustomTag = variant;
24
24
 
@@ -37,7 +37,7 @@ export const Typography = ({ variant, className, color, bold, children, ...props
37
37
  `;
38
38
 
39
39
  return (
40
- <StyledTypograpy className={classProps}> {children} </StyledTypograpy>
40
+ <StyledTypograpy className={classProps} onClick={onClick}> {children} </StyledTypograpy>
41
41
  );
42
42
  };
43
43
 
@@ -45,9 +45,12 @@ Typography.propTypes = {
45
45
  variant: PropTypes.oneOf(Object.values(TypographyType)),
46
46
  className: PropTypes.string,
47
47
  bold: PropTypes.bool,
48
- color: PropTypes.string
48
+ color: PropTypes.string,
49
+ onClick: PropTypes.func
49
50
  };
50
51
 
51
52
  Typography.defaultProps = {
52
- variant: 'h1'
53
+ variant: 'h1',
54
+ onClick: ()=> {
55
+ }
53
56
  };
@@ -26,4 +26,6 @@ const Template = (args) => <>
26
26
  export const Default = Template.bind({});
27
27
  Default.args = {
28
28
  variant: 'h1',
29
+ onClick: ()=> {
30
+ }
29
31
  };