@xaypay/tui 0.0.73 → 0.0.75

package/src/components/newAutocomplete/index.js

@@ -12,6 +12,7 @@ export const NewAutocomplete = ({
     getItem,
     required,
     disabled,
+    selected,
     errorSize,
     labelSize,
     errorColor,
@@ -140,7 +141,7 @@ export const NewAutocomplete = ({
     const optionList = (
         <>
             {
-                show && innerOptions
+                show && innerOptions && !disabled
                 ?
                     innerOptions.length > 0
                     ?
@@ -248,7 +249,7 @@ export const NewAutocomplete = ({
         }
 
         options && setInnerOptions(options);
-    }, [options, options.length, getItem]);
+    }, [options, options?.length, getItem]);
 
     useEffect(() => {
         if (!change) {
@@ -256,6 +257,14 @@ export const NewAutocomplete = ({
         }
     }, [change]);
 
+    useEffect(() => {
+        if (selected) {
+            setInnerValue(selected);
+        } else {
+            setInnerValue('');
+        }
+    }, [selected, selected?.length]);
+
     return (
         <>
             {
@@ -354,6 +363,7 @@ NewAutocomplete.propTypes = {
     label: PropTypes.string,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
+    selected: PropTypes.string,
     errorSize: PropTypes.string,
     labelSize: PropTypes.string,
     errorColor: PropTypes.string,

package/src/components/select/index.js

@@ -194,7 +194,7 @@ export const Select = ({
             });
             setExistOptions(modifiedOptions);
         }
-    }, [options, multiple, selected, selected.length]);
+    }, [options, multiple, selected, selected?.length]);
     
     return (
         <div className={classProps}>

package/src/stories/configuration.stories.mdx

@@ -564,4 +564,20 @@ import StackAlt from './assets/stackalt.svg';
   hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
   listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
 }
+```
+
+### Modal
+```
+{
+  radius: '14px',                                       // for modal border radius
+  headerSize: '20px',                                   // for modal header font size
+  imageWidth: '600px',                                  // for modal image width on images mode
+  headerWeight: '600',                                  // for modal header font weight
+  imageHeight: '300px',                                 // for modal image height on images mode
+  headerHeight: '27px',                                 // for modal header height
+  headerColor: '#00236a',                               // for modal header color
+  backgroundColor: 'white',                             // for modal background color
+  padding: '10px 20px 20px',                            // for modal padding
+  layerBackgroundColor: 'rgba(0,0,0,0.4)',              // for modal parent layer background color
+}
 ```

package/src/stories/usage.stories.mdx

@@ -11,6 +11,7 @@ import StackAlt from './assets/stackalt.svg';
 import fileImage from './static/file-usage.png';
 import captcha from './static/captcha-usage.png';
 import inputImage from './static/input-usage.png';
+import modalImage from './static/modal-usage.png';
 import buttonImage from './static/button-usage.png';
 import selectImage from './static/select-usage.png';
 import toastImage from './static/toaster-usage.png';
@@ -165,4 +166,7 @@ import autocompleteImage from './static/autocomplete-usage.png';
 <img src={fileImage} alt="file image" />
 
 ### NewFile in Single Mode
-<img src={fileSingleImage} alt="file image" />
+<img src={fileSingleImage} alt="file image" />
+
+### Modal
+<img src={modalImage} alt="file image" />

package/tui.config.js

@@ -361,5 +361,18 @@ module.exports = {
         putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
         hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
         listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
+    },
+    // default properties for <Modal /> component
+    MODAL: {
+        radius: '14px',                                       // for modal border radius
+        headerSize: '20px',                                   // for modal header font size
+        imageWidth: '600px',                                  // for modal image width on images mode
+        headerWeight: '600',                                  // for modal header font weight
+        imageHeight: '300px',                                 // for modal image height on images mode
+        headerHeight: '27px',                                 // for modal header height
+        headerColor: '#00236a',                               // for modal header color
+        backgroundColor: 'white',                             // for modal background color
+        padding: '10px 20px 20px',                            // for modal padding
+        layerBackgroundColor: 'rgba(0,0,0,0.4)',              // for modal parent layer background color
     }
 };