@xaypay/tui 0.0.19 → 0.0.20

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styled from 'styled-components';
@@ -397,6 +397,9 @@ const Input = ({
     setInputValue(event.target.value);
     onChange ? onChange(event.target.value) : '';
   };
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
   let eMessage = "";
   if (errorMesage) {
     eMessage = errorMesage;
@@ -783,9 +786,12 @@ const Select = ({
   selected
 }) => {
   const options = jsonData.length ? JSON.parse(jsonData) : [];
-  const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
   let [opened, setOpened] = useState(false);
-  let [newSelected, setNewSelected] = useState(parseSelectedData);
+  let [newSelected, setNewSelected] = useState({});
+  useEffect(() => {
+    const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
+    setNewSelected(parseSelectedData);
+  }, [selected]);
   classnames(styles[theme], styles[size], {
     [styles.disabled]: disabled,
     [styles.required]: required

package/dist/index.js

@@ -408,6 +408,9 @@ const Input = ({
     setInputValue(event.target.value);
     onChange ? onChange(event.target.value) : '';
   };
+  React.useEffect(() => {
+    setInputValue(value);
+  }, [value]);
   let eMessage = "";
   if (errorMesage) {
     eMessage = errorMesage;
@@ -794,9 +797,12 @@ const Select = ({
   selected
 }) => {
   const options = jsonData.length ? JSON.parse(jsonData) : [];
-  const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
   let [opened, setOpened] = React.useState(false);
-  let [newSelected, setNewSelected] = React.useState(parseSelectedData);
+  let [newSelected, setNewSelected] = React.useState({});
+  React.useEffect(() => {
+    const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
+    setNewSelected(parseSelectedData);
+  }, [selected]);
   classnames__default["default"](styles[theme], styles[size], {
     [styles.disabled]: disabled,
     [styles.required]: required

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/input/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./input.module.css";
@@ -38,6 +38,10 @@ export const Input = ({
     onChange ? onChange(event.target.value) : '';
   };
 
+  useEffect(()=>{
+    setInputValue(value)
+  },[value])
+
   let eMessage = "";
   if (errorMesage) {
     eMessage = errorMesage;

package/src/components/select/index.js

@@ -36,10 +36,18 @@ export const Select = ({
     selected
 }) => {
     const options = jsonData.length ? JSON.parse(jsonData) : [];
-    const parseSelectedData =
-    selected.length !== 0 ? JSON.parse(selected) : {};
+
+   
+    
     let [opened, setOpened] = useState(false)
-    let [newSelected, setNewSelected] = useState(parseSelectedData)
+    let [newSelected, setNewSelected] = useState({})
+
+    useEffect(()=>{
+        const parseSelectedData =
+        selected.length !== 0 ? JSON.parse(selected) : {};
+        setNewSelected(parseSelectedData);
+    },[selected])
+
     const classProps = classnames(
         styles[theme],
         styles[size],