@xaypay/tui 0.0.21 → 0.0.23

package/dist/index.es.js

@@ -195,45 +195,55 @@ const Autocomplate = ({
   onChange,
   value,
   searchCount,
+  placeHolder,
   keyNames,
+  errorMesage,
   ...props
 }) => {
   classnames(styles$7.searchBox, className);
-  const [inputValue, setInputValue] = useState(null);
-  const [inputId, setInputId] = useState(null);
+  const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {
+    name: '',
+    id: ''
+  };
+  const [inputValue, setInputValue] = useState(parseSelectedOptionsData[keyNames.name]);
+  const [inputId, setInputId] = useState(parseSelectedOptionsData[keyNames.id]);
   const [activeOption, setActiveOption] = useState(0);
-  const [filteredOptions, setFilteredOptions] = useState([]);
   const [showOptions, setShowOptions] = useState(false);
-  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData).sort() : [];
-  const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {};
+  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
+  useEffect(() => {
+    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
+    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
+  }, [jsonSelectedOptionsData]);
   const handleChange = e => {
     const currentInputValue = e.currentTarget.value;
     setInputId(null);
-    const filteredOptions = parseOptionsData.filter(optionName => optionName[keyNames.name].toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1);
     setInputValue(currentInputValue);
+    setInputId('');
     setActiveOption(0);
-    setFilteredOptions(filteredOptions);
     setShowOptions(true);
+    onChange({
+      name: currentInputValue,
+      id: e.target.id
+    });
   };
   const handleClick = e => {
-    setInputValue(e.currentTarget.innerText);
-    setInputId();
     setActiveOption(0);
-    setFilteredOptions([]);
     setShowOptions(false);
+    setInputValue(e.target.innerText);
+    setInputId(e.target.id);
     onChange({
-      name: e.currentTarget.innerText,
+      name: e.target.innerText,
       id: e.target.id
     });
   };
   let optionList;
   if (showOptions && inputValue) {
-    if (filteredOptions.length && inputValue.length >= searchCount) {
+    if (parseOptionsData.length && inputValue.length >= searchCount) {
       optionList = /*#__PURE__*/React.createElement("div", {
         className: styles$7['autocomplate-content-bottom']
       }, /*#__PURE__*/React.createElement("div", {
         className: styles$7['autocomplate-content-bottom-inner']
-      }, filteredOptions.map((optionName, index) => {
+      }, parseOptionsData.map((optionName, index) => {
         let className;
         if (index === activeOption) {
           className = "option-active";
@@ -270,13 +280,19 @@ const Autocomplate = ({
     required: required,
     disabled: disabled,
     onChange: handleChange,
-    value: inputValue != null ? inputValue : parseSelectedOptionsData[keyNames.name],
-    placeholder: !parseSelectedOptionsData[keyNames.name] ? " Write..." : ''
-  }, props)), optionList));
+    onClick: () => {
+      setShowOptions(!showOptions);
+    },
+    value: inputValue,
+    placeholder: placeHolder
+  }, props)), errorMesage ? /*#__PURE__*/React.createElement("span", {
+    className: styles$7.errorMessage
+  }, errorMesage) : null, optionList));
 };
 Autocomplate.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
+  placeHolder: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   jsonOptionsData: PropTypes.string,
@@ -284,7 +300,8 @@ Autocomplate.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.string,
   searchCount: PropTypes.number,
-  keyNames: PropTypes.object
+  keyNames: PropTypes.object,
+  errorMesage: PropTypes.string
 };
 
 var css_248z$7 = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
@@ -301,11 +318,15 @@ const Checkbox = ({
   onChange,
   label,
   keyNames,
+  onClick,
   ...props
 }) => {
   const classProps = classnames(styles$6.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = useState(parseData);
+  const handleClick = e => {
+    onClick(e);
+  };
   const handleChange = e => {
     if (e.target.checked) {
       data.forEach(item => {
@@ -334,7 +355,8 @@ const Checkbox = ({
       required: required,
       value: value ? value : element.value,
       name: name ? name : element.name,
-      onChange: handleChange
+      onChange: handleChange,
+      onClick: handleClick
     }, props)), /*#__PURE__*/React.createElement("span", {
       className: styles$6["checkmark"]
     }), element.label ? /*#__PURE__*/React.createElement("span", {
@@ -351,7 +373,7 @@ Checkbox.propTypes = {
   value: PropTypes.string,
   jsonData: PropTypes.string,
   label: PropTypes.string,
-  onChange: PropTypes.func,
+  onClick: PropTypes.func,
   keyNames: PropTypes.object
 };
 Checkbox.defaultProps = {

package/dist/index.js

@@ -206,45 +206,55 @@ const Autocomplate = ({
   onChange,
   value,
   searchCount,
+  placeHolder,
   keyNames,
+  errorMesage,
   ...props
 }) => {
   classnames__default["default"](styles$7.searchBox, className);
-  const [inputValue, setInputValue] = React.useState(null);
-  const [inputId, setInputId] = React.useState(null);
+  const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {
+    name: '',
+    id: ''
+  };
+  const [inputValue, setInputValue] = React.useState(parseSelectedOptionsData[keyNames.name]);
+  const [inputId, setInputId] = React.useState(parseSelectedOptionsData[keyNames.id]);
   const [activeOption, setActiveOption] = React.useState(0);
-  const [filteredOptions, setFilteredOptions] = React.useState([]);
   const [showOptions, setShowOptions] = React.useState(false);
-  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData).sort() : [];
-  const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {};
+  const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
+  React.useEffect(() => {
+    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
+    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
+  }, [jsonSelectedOptionsData]);
   const handleChange = e => {
     const currentInputValue = e.currentTarget.value;
     setInputId(null);
-    const filteredOptions = parseOptionsData.filter(optionName => optionName[keyNames.name].toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1);
     setInputValue(currentInputValue);
+    setInputId('');
     setActiveOption(0);
-    setFilteredOptions(filteredOptions);
     setShowOptions(true);
+    onChange({
+      name: currentInputValue,
+      id: e.target.id
+    });
   };
   const handleClick = e => {
-    setInputValue(e.currentTarget.innerText);
-    setInputId();
     setActiveOption(0);
-    setFilteredOptions([]);
     setShowOptions(false);
+    setInputValue(e.target.innerText);
+    setInputId(e.target.id);
     onChange({
-      name: e.currentTarget.innerText,
+      name: e.target.innerText,
       id: e.target.id
     });
   };
   let optionList;
   if (showOptions && inputValue) {
-    if (filteredOptions.length && inputValue.length >= searchCount) {
+    if (parseOptionsData.length && inputValue.length >= searchCount) {
       optionList = /*#__PURE__*/React__default["default"].createElement("div", {
         className: styles$7['autocomplate-content-bottom']
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: styles$7['autocomplate-content-bottom-inner']
-      }, filteredOptions.map((optionName, index) => {
+      }, parseOptionsData.map((optionName, index) => {
         let className;
         if (index === activeOption) {
           className = "option-active";
@@ -281,13 +291,19 @@ const Autocomplate = ({
     required: required,
     disabled: disabled,
     onChange: handleChange,
-    value: inputValue != null ? inputValue : parseSelectedOptionsData[keyNames.name],
-    placeholder: !parseSelectedOptionsData[keyNames.name] ? " Write..." : ''
-  }, props)), optionList));
+    onClick: () => {
+      setShowOptions(!showOptions);
+    },
+    value: inputValue,
+    placeholder: placeHolder
+  }, props)), errorMesage ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$7.errorMessage
+  }, errorMesage) : null, optionList));
 };
 Autocomplate.propTypes = {
   className: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
+  placeHolder: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   jsonOptionsData: PropTypes__default["default"].string,
@@ -295,7 +311,8 @@ Autocomplate.propTypes = {
   onChange: PropTypes__default["default"].func,
   value: PropTypes__default["default"].string,
   searchCount: PropTypes__default["default"].number,
-  keyNames: PropTypes__default["default"].object
+  keyNames: PropTypes__default["default"].object,
+  errorMesage: PropTypes__default["default"].string
 };
 
 var css_248z$7 = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
@@ -312,11 +329,15 @@ const Checkbox = ({
   onChange,
   label,
   keyNames,
+  onClick,
   ...props
 }) => {
   const classProps = classnames__default["default"](styles$6.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = React.useState(parseData);
+  const handleClick = e => {
+    onClick(e);
+  };
   const handleChange = e => {
     if (e.target.checked) {
       data.forEach(item => {
@@ -345,7 +366,8 @@ const Checkbox = ({
       required: required,
       value: value ? value : element.value,
       name: name ? name : element.name,
-      onChange: handleChange
+      onChange: handleChange,
+      onClick: handleClick
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
       className: styles$6["checkmark"]
     }), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
@@ -362,7 +384,7 @@ Checkbox.propTypes = {
   value: PropTypes__default["default"].string,
   jsonData: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func,
+  onClick: PropTypes__default["default"].func,
   keyNames: PropTypes__default["default"].object
 };
 Checkbox.defaultProps = {

package/package.json

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

package/src/components/autocomplate/autocomplate.stories.js

@@ -11,13 +11,23 @@ const Template = (args) => <Autocomplate {...args} />;
 export const Default = Template.bind({});
 Default.args = {
   jsonOptionsData: '[{"bbb":"0", "value":"asd"}, {"bbb":"2", "value":"bas"}]',
-  // jsonSelectedOptionsData: '{"bbb":"0", "value":"asd"}',
+  jsonSelectedOptionsData: '{"bbb":"0", "value":"gasdfgdsfgdsg"}',
   label: 'label',
   keyNames: { name: 'value', id: 'bbb' },
   searchCount: 2,
-  onChange(aa){
+  onChange: (aa)=> {
     console.log(aa);
-    // console.log(aa.id);
+    fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${aa.name? aa.name : 'a'}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6Ijk2Mjk0MjJkNTY1ZTQ3MGM3MjFkZjY5NDgzMzE3ZThmYjdlMDJmMjI4YjY5MzZhYzdiM2EzMWM4ODZkMWQwZDk2YjIzNzYwMmJhMWE0MTE0IiwiaWF0IjoxNjY5MTgyOTI5LjczMjIwOCwibmJmIjoxNjY5MTgyOTI5LjczMjIzLCJleHAiOjE2NjkyMDgxMjkuNzEyNDczLCJzdWIiOiJtaW5hcyIsInNjb3BlcyI6WyJlbWFpbCJdfQ.NsFsqDHOBYzgReUtW9iumbEvYCB8O7yCIJ2UTz0-AeVEjdUxE-htZMBYF8pP3m-lM1IQ3iN2ude7AZhTzVLMAhTt-5tKJr8YAxhX28yCBLYsFHE-e0k7-FLKBkkZxt9yrvX_Rz8aSQ39-3HrkyB-BYHzV5-GnMgAhnrWKYlTmrVFi9SWu0WBYPHvblMTEh3Vkkd1ESn7fUhy8gf8qma0ChRAMbkozLffbVVYfnWlU0eySD2PUWrZ26JtKAX6k-q7TiMd6HMjOEFUi80JH7aoKDI1vdg8kKlPqcjYTEJK3hzIJrtOHTTUoW4m1-k5x9Le3ULdT4Hctr0bh--ERShnTTg-DBJh0zIoBol4hFHZnA35_FEqKBkDAJ3EOt9DusBTJ9Iad-JzrxJqb-4uhzWjTg8f3F_IedPgG3pwqGkSw2U2dVqzwdqy3yaElp7SGWpicNxJWJsr5Vfa8gLhMkmDMooOHNBUNkS-4Z8Cn6dPc-1mg2JZxrBuSMElkp8-DQr9Xe9VBf8wCUEdHDvQmb-6LIEL8njS2XGL82m827uO-BOVVOIiZO-BVGn_VjIwdhywrjmudPWBy2CVUxHEft64Bz3VkS2FnFoSN7_zsaCE6dpXWTRJKv-4IeBv8pn4-lYw67jMINza7Om9_6BOlnk1VvjixmulPyTobgEO7PQ6FeE',
+      },
+    }).then((res)=> {
+      return res.json()
+    }).then((data)=> {
+      console.log(data)
+    })
   }
 
 };

package/src/components/autocomplate/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 "./autocomplate.module.css";
@@ -13,79 +13,81 @@ export const Autocomplate = ({
   onChange,
   value,
   searchCount,
+  placeHolder,
   keyNames,
+  errorMesage,
   ...props
 }) => {
   const classProps = classnames(styles.searchBox, className);
-  const [inputValue, setInputValue] = useState(null);
-  const [inputId, setInputId] = useState(null);
+  const parseSelectedOptionsData =
+    jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : { name: '', id: '' };
+  const [inputValue, setInputValue] = useState(parseSelectedOptionsData[keyNames.name]);
+  const [inputId, setInputId] = useState(parseSelectedOptionsData[keyNames.id]);
   const [activeOption, setActiveOption] = useState(0);
-  const [filteredOptions, setFilteredOptions] = useState([]);
   const [showOptions, setShowOptions] = useState(false);
   const parseOptionsData =
-    jsonOptionsData? JSON.parse(jsonOptionsData).sort() : [];
-    const parseSelectedOptionsData =
-    jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {};
-    
+    jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
+  useEffect(() => {
+    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name])
+    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id])
+  }, [jsonSelectedOptionsData])
+
   const handleChange = (e) => {
     const currentInputValue = e.currentTarget.value;
     setInputId(null)
-    const filteredOptions = parseOptionsData.filter(
-      (optionName) =>
-        optionName[keyNames.name].toLowerCase().indexOf(currentInputValue.toLowerCase()) > -1
-    );
     setInputValue(currentInputValue);
+    setInputId('')
     setActiveOption(0);
-    setFilteredOptions(filteredOptions);
-    setShowOptions(true);    
+    setShowOptions(true);
+    onChange({ name: currentInputValue, id: e.target.id });
   };
   const handleClick = (e) => {
-    setInputValue(e.currentTarget.innerText);
-    setInputId()
     setActiveOption(0);
-    setFilteredOptions([]);
     setShowOptions(false);
-    onChange({name: e.currentTarget.innerText, id: e.target.id});
+    setInputValue(e.target.innerText);
+    setInputId(e.target.id)
+
+    onChange({ name: e.target.innerText, id: e.target.id });
 
   };
   let optionList;
-    if (showOptions && inputValue) {
-        if (filteredOptions.length && inputValue.length >= searchCount) {
-            optionList = (
-                <div className={styles['autocomplate-content-bottom']}>
-                  <div className={styles['autocomplate-content-bottom-inner']}>
-                      {filteredOptions.map((optionName, index) => {
-                          let className;
-                          if (index === activeOption) {
-                              className = "option-active";
-                          }
-                          return (
-                              <div
-                                  className={styles[className]}
-                                  key={optionName[keyNames.id]}
-                                  onClick={handleClick}
-                              >
-                                <div id={optionName[keyNames.id]} className={styles['autocomplate-content-bottom-row']}>{optionName[keyNames.name]}</div>
-                              </div>
-                          );
-                      })}
-                  </div>
+  if (showOptions && inputValue) {
+    if (parseOptionsData.length && inputValue.length >= searchCount) {
+      optionList = (
+        <div className={styles['autocomplate-content-bottom']}>
+          <div className={styles['autocomplate-content-bottom-inner']}>
+            {parseOptionsData.map((optionName, index) => {
+              let className;
+              if (index === activeOption) {
+                className = "option-active";
+              }
+              return (
+                <div
+                  className={styles[className]}
+                  key={optionName[keyNames.id]}
+                  onClick={handleClick}
+                >
+                  <div id={optionName[keyNames.id]} className={styles['autocomplate-content-bottom-row']}>{optionName[keyNames.name]}</div>
                 </div>
+              );
+            })}
+          </div>
+        </div>
 
 
-            );
-        } else {
-            optionList = (
-                <div className={styles['autocomplate-content-bottom']}>
-                  <div className={styles['autocomplate-content-bottom-inner']}>
-                    <div className={styles['autocomplate-content-bottom-row']}>
-                      <div className={styles['no-option']}>No Option!</div>
-                    </div>
-                  </div>
-                </div>
-            );
-        }
+      );
+    } else {
+      optionList = (
+        <div className={styles['autocomplate-content-bottom']}>
+          <div className={styles['autocomplate-content-bottom-inner']}>
+            <div className={styles['autocomplate-content-bottom-row']}>
+              <div className={styles['no-option']}>No Option!</div>
+            </div>
+          </div>
+        </div>
+      );
     }
+  }
 
   return (
     <>
@@ -98,10 +100,12 @@ export const Autocomplate = ({
           required={required}
           disabled={disabled}
           onChange={handleChange}
-          value={inputValue != null ? inputValue : parseSelectedOptionsData[keyNames.name]}
-          placeholder= {!parseSelectedOptionsData[keyNames.name]  ?" Write..." : ''}
+          onClick={() => { setShowOptions(!showOptions) }}
+          value={inputValue}
+          placeholder={placeHolder}
           {...props}
-        />
+          />
+          {errorMesage ? <span className={styles.errorMessage}>{errorMesage}</span> : null}
         {optionList}
       </div>
     </>
@@ -111,6 +115,7 @@ export const Autocomplate = ({
 Autocomplate.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
+  placeHolder: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   jsonOptionsData: PropTypes.string,
@@ -119,6 +124,7 @@ Autocomplate.propTypes = {
   value: PropTypes.string,
   searchCount: PropTypes.number,
   keyNames: PropTypes.object,
+  errorMesage: PropTypes.string,
 };
 
 

package/src/components/checkbox/index.js

@@ -13,12 +13,17 @@ export const Checkbox = ({
   onChange,
   label,
   keyNames,
+  onClick,
   ...props
 }) => {
   const classProps = classNames(styles.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = useState(parseData);
 
+  const handleClick = (e) => {
+    onClick(e)
+  }
+
   const handleChange = (e) => {
     if (e.target.checked) {
       data.forEach((item) => {
@@ -50,9 +55,10 @@ export const Checkbox = ({
               value={value ? value : element.value}
               name={name ? name : element.name}
               onChange={handleChange}
+              onClick={handleClick}
               {...props}
             />
-            <span className={styles["checkmark"]}/>
+            <span className={styles["checkmark"]} />
             {element.label ? (
               <span className={styles.labelRadio}>
                 {label ? label : element.label}
@@ -76,7 +82,7 @@ Checkbox.propTypes = {
   value: PropTypes.string,
   jsonData: PropTypes.string,
   label: PropTypes.string,
-  onChange: PropTypes.func,
+  onClick: PropTypes.func,
   keyNames: PropTypes.object,
 };