@xaypay/tui 0.0.18 → 0.0.20

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 (7) hide show
  1. package/dist/index.es.js +13 -7
  2. package/dist/index.js +12 -6
  3. package/package.json +1 -1
  4. package/src/components/input/index.js +5 -1
  5. package/src/components/pagination/index.js +6 -3
  6. package/src/components/select/index.js +11 -3
  7. package/src/components/select/select.module.css +5 -2
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useMemo, useEffect } from 'react';
1
+ import React, { useState, useEffect, useMemo } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import classnames from 'classnames';
4
4
  import styled from 'styled-components';
@@ -397,6 +397,9 @@ const Input = ({
397
397
  setInputValue(event.target.value);
398
398
  onChange ? onChange(event.target.value) : '';
399
399
  };
400
+ useEffect(() => {
401
+ setInputValue(value);
402
+ }, [value]);
400
403
  let eMessage = "";
401
404
  if (errorMesage) {
402
405
  eMessage = errorMesage;
@@ -553,7 +556,7 @@ const Pagination = ({
553
556
  className: styles$4["pagination-btn"],
554
557
  onClick: onPrevious,
555
558
  disabled: currentPage === 1 ? true : false
556
- }, /*#__PURE__*/React.createElement(Icon, {
559
+ }, /*#__PURE__*/React.createElement("i", {
557
560
  className: "icon-arrow-back"
558
561
  })), paginationRange.map((pageNumber, id) => {
559
562
  if (pageNumber === Dots) {
@@ -567,7 +570,7 @@ const Pagination = ({
567
570
  className: styles$4['pagination-jump-next-txt']
568
571
  }, "..."), /*#__PURE__*/React.createElement("span", {
569
572
  className: styles$4['pagination-jump-next-arrow']
570
- }, /*#__PURE__*/React.createElement(Icon, {
573
+ }, /*#__PURE__*/React.createElement("i", {
571
574
  className: "icon-arrow-jump-next"
572
575
  })));
573
576
  }
@@ -580,7 +583,7 @@ const Pagination = ({
580
583
  onClick: onNext,
581
584
  className: styles$4["pagination-btn"],
582
585
  disabled: currentPageNumber === lastPage ? true : false
583
- }, /*#__PURE__*/React.createElement(Icon, {
586
+ }, /*#__PURE__*/React.createElement("i", {
584
587
  className: "icon-arrow"
585
588
  })));
586
589
  };
@@ -750,7 +753,7 @@ Stepper.propTypes = {
750
753
  activeSteps: PropTypes.number
751
754
  };
752
755
 
753
- var css_248z = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:capitalize}.select-module_select-content__GCMDX{display:flex;flex-direction:column}.select-module_select-content-top__Aw-fB{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}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:8px}.select-module_select-content-bottom-row__eKq5L{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}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}";
756
+ var css_248z = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:capitalize}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{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}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .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%}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:8px}.select-module_select-content-bottom-row__eKq5L{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}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}";
754
757
  var styles = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
755
758
  styleInject(css_248z);
756
759
 
@@ -783,9 +786,12 @@ const Select = ({
783
786
  selected
784
787
  }) => {
785
788
  const options = jsonData.length ? JSON.parse(jsonData) : [];
786
- const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
787
789
  let [opened, setOpened] = useState(false);
788
- let [newSelected, setNewSelected] = useState(parseSelectedData);
790
+ let [newSelected, setNewSelected] = useState({});
791
+ useEffect(() => {
792
+ const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
793
+ setNewSelected(parseSelectedData);
794
+ }, [selected]);
789
795
  classnames(styles[theme], styles[size], {
790
796
  [styles.disabled]: disabled,
791
797
  [styles.required]: required
package/dist/index.js CHANGED
@@ -408,6 +408,9 @@ const Input = ({
408
408
  setInputValue(event.target.value);
409
409
  onChange ? onChange(event.target.value) : '';
410
410
  };
411
+ React.useEffect(() => {
412
+ setInputValue(value);
413
+ }, [value]);
411
414
  let eMessage = "";
412
415
  if (errorMesage) {
413
416
  eMessage = errorMesage;
@@ -564,7 +567,7 @@ const Pagination = ({
564
567
  className: styles$4["pagination-btn"],
565
568
  onClick: onPrevious,
566
569
  disabled: currentPage === 1 ? true : false
567
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
570
+ }, /*#__PURE__*/React__default["default"].createElement("i", {
568
571
  className: "icon-arrow-back"
569
572
  })), paginationRange.map((pageNumber, id) => {
570
573
  if (pageNumber === Dots) {
@@ -578,7 +581,7 @@ const Pagination = ({
578
581
  className: styles$4['pagination-jump-next-txt']
579
582
  }, "..."), /*#__PURE__*/React__default["default"].createElement("span", {
580
583
  className: styles$4['pagination-jump-next-arrow']
581
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
584
+ }, /*#__PURE__*/React__default["default"].createElement("i", {
582
585
  className: "icon-arrow-jump-next"
583
586
  })));
584
587
  }
@@ -591,7 +594,7 @@ const Pagination = ({
591
594
  onClick: onNext,
592
595
  className: styles$4["pagination-btn"],
593
596
  disabled: currentPageNumber === lastPage ? true : false
594
- }, /*#__PURE__*/React__default["default"].createElement(Icon, {
597
+ }, /*#__PURE__*/React__default["default"].createElement("i", {
595
598
  className: "icon-arrow"
596
599
  })));
597
600
  };
@@ -761,7 +764,7 @@ Stepper.propTypes = {
761
764
  activeSteps: PropTypes__default["default"].number
762
765
  };
763
766
 
764
- var css_248z = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:capitalize}.select-module_select-content__GCMDX{display:flex;flex-direction:column}.select-module_select-content-top__Aw-fB{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}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);max-height:0;max-width:400px;overflow:hidden;position:relative;top:6px}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:8px}.select-module_select-content-bottom-row__eKq5L{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}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}";
767
+ var css_248z = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:capitalize}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{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}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .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%}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:8px}.select-module_select-content-bottom-row__eKq5L{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}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}";
765
768
  var styles = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
766
769
  styleInject(css_248z);
767
770
 
@@ -794,9 +797,12 @@ const Select = ({
794
797
  selected
795
798
  }) => {
796
799
  const options = jsonData.length ? JSON.parse(jsonData) : [];
797
- const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
798
800
  let [opened, setOpened] = React.useState(false);
799
- let [newSelected, setNewSelected] = React.useState(parseSelectedData);
801
+ let [newSelected, setNewSelected] = React.useState({});
802
+ React.useEffect(() => {
803
+ const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
804
+ setNewSelected(parseSelectedData);
805
+ }, [selected]);
800
806
  classnames__default["default"](styles[theme], styles[size], {
801
807
  [styles.disabled]: disabled,
802
808
  [styles.required]: required
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.18",
3
+ "version": "0.0.20",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/input/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState } from "react";
1
+ import React, { useEffect, useState } from "react";
2
2
  import PropTypes from "prop-types";
3
3
  import classnames from "classnames";
4
4
  import styles from "./input.module.css";
@@ -38,6 +38,10 @@ export const Input = ({
38
38
  onChange ? onChange(event.target.value) : '';
39
39
  };
40
40
 
41
+ useEffect(()=>{
42
+ setInputValue(value)
43
+ },[value])
44
+
41
45
  let eMessage = "";
42
46
  if (errorMesage) {
43
47
  eMessage = errorMesage;
package/src/components/pagination/index.js CHANGED
@@ -66,7 +66,8 @@ export const Pagination = ({
66
66
  return (
67
67
  <ul className={classProps}>
68
68
  <button className={styles["pagination-btn"]} onClick={onPrevious} disabled={currentPage === 1 ? true : false}>
69
- <Icon className="icon-arrow-back"/>
69
+ {/* <Icon className="icon-arrow-back"/> */}
70
+ <i className="icon-arrow-back"></i>
70
71
  </button>
71
72
 
72
73
  {paginationRange.map((pageNumber, id) => {
@@ -77,7 +78,8 @@ export const Pagination = ({
77
78
  disabled={currentPageIndex === 0 ? true : false}>
78
79
  <span className={styles['pagination-jump-next-txt']}>...</span>
79
80
  <span className={styles['pagination-jump-next-arrow']}>
80
- <Icon className="icon-arrow-jump-next"/>
81
+ {/* <Icon className="icon-arrow-jump-next"/> */}
82
+ <i className="icon-arrow-jump-next"></i>
81
83
  </span>
82
84
  </li>
83
85
  );
@@ -97,7 +99,8 @@ export const Pagination = ({
97
99
  className={styles["pagination-btn"]}
98
100
  disabled={currentPageNumber === lastPage ? true : false}
99
101
  >
100
- <Icon className='icon-arrow'/>
102
+ {/* <Icon className='icon-arrow'/> */}
103
+ <i className="icon-arrow"></i>
101
104
  </button>
102
105
  </ul>
103
106
  );
package/src/components/select/index.js CHANGED
@@ -36,10 +36,18 @@ export const Select = ({
36
36
  selected
37
37
  }) => {
38
38
  const options = jsonData.length ? JSON.parse(jsonData) : [];
39
- const parseSelectedData =
40
- selected.length !== 0 ? JSON.parse(selected) : {};
39
+
40
+
41
+
41
42
  let [opened, setOpened] = useState(false)
42
- let [newSelected, setNewSelected] = useState(parseSelectedData)
43
+ let [newSelected, setNewSelected] = useState({})
44
+
45
+ useEffect(()=>{
46
+ const parseSelectedData =
47
+ selected.length !== 0 ? JSON.parse(selected) : {};
48
+ setNewSelected(parseSelectedData);
49
+ },[selected])
50
+
43
51
  const classProps = classnames(
44
52
  styles[theme],
45
53
  styles[size],
package/src/components/select/select.module.css CHANGED
@@ -10,6 +10,7 @@
10
10
  .select-content {
11
11
  display: flex;
12
12
  flex-direction: column;
13
+ position: relative;
13
14
  }
14
15
  .select-content-top {
15
16
  display: flex;
@@ -34,8 +35,10 @@
34
35
  border-color: #3C393E;
35
36
  }
36
37
  .select-content-bottom {
37
- position: relative;
38
- top: 6px;
38
+ position: absolute;
39
+ width: 100%;
40
+ top: 52px;
41
+ left: 0;
39
42
  overflow: hidden;
40
43
  max-width: 400px;
41
44
  background: #FBFBFB;