@xaypay/tui 0.0.48 → 0.0.49

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 (8) hide show
  1. package/dist/index.es.js +56 -52
  2. package/dist/index.js +56 -52
  3. package/package.json +1 -1
  4. package/src/components/autocomplate/index.js +1 -1
  5. package/src/components/file/file.stories.js +1 -5
  6. package/src/components/file/index.js +82 -69
  7. package/src/components/select/index.js +1 -1
  8. package/src/components/select/select.module.css +9 -1
package/dist/index.es.js CHANGED
@@ -270,7 +270,7 @@ const Autocomplate = ({
270
270
  className: `${styles$a['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
271
271
  }, /*#__PURE__*/React.createElement("div", {
272
272
  className: `${styles$a['no-option']} autocomplate-no-option`
273
- }, inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` : 'տվյալներ չկան'))));
273
+ }, inputValue.length <= searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'))));
274
274
  }
275
275
  }
276
276
  return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
@@ -814,8 +814,8 @@ Stepper.propTypes = {
814
814
  activeSteps: PropTypes.number
815
815
  };
816
816
 
817
- var css_248z$3 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.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%;z-index:1}.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:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 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;line-height:22px;margin-bottom:2px;min-height:46px;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}";
818
- var styles$3 = {"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"};
817
+ var css_248z$3 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.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%;z-index:1}.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:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 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;line-height:22px;margin-bottom:2px;min-height:46px;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}.select-module_error-message__-ac6X{border:2px solid #e00}.select-module_eMessage__Mm-F7{color:#e00}";
818
+ var styles$3 = {"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","error-message":"select-module_error-message__-ac6X","eMessage":"select-module_eMessage__Mm-F7"};
819
819
  styleInject(css_248z$3);
820
820
 
821
821
  const SelectTheme = {
@@ -884,7 +884,7 @@ const Select = ({
884
884
  className: styles$3['select-content'],
885
885
  id: styles$3.selector
886
886
  }, /*#__PURE__*/React.createElement("div", {
887
- className: `${styles$3['select-content-top']} select-content-top-rem`,
887
+ className: `${styles$3['select-content-top']} select-content-top-rem ${eMessage ? styles$3['error-message'] : ''}`,
888
888
  onClick: () => {
889
889
  setOpened(!opened);
890
890
  }
@@ -945,46 +945,65 @@ var styles$2 = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form"
945
945
  styleInject(css_248z$2);
946
946
 
947
947
  const File = ({
948
- className,
948
+ name,
949
949
  label,
950
+ maxSize,
950
951
  required,
951
952
  disabled,
952
953
  onChange,
954
+ className,
953
955
  defaultData,
954
956
  errorMesage,
955
- name,
957
+ fileExtensions,
956
958
  ...props
957
959
  }) => {
958
960
  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
959
961
  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
960
962
  const [error, setError] = useState('');
961
963
  const [fileName, setFileName] = useState('no selected file');
962
- function fileType(file) {
963
- if (file[0].size <= 5000000) {
964
- if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
965
- setFileName(file[0].name);
966
- setImage(URL.createObjectURL(file[0]));
967
- onChange({
968
- file
969
- });
970
- setError('');
971
- } else if (file[0].type === 'application/pdf') {
972
- setImage(pdfImageName);
973
- onChange({
974
- file
975
- });
976
- setError('');
964
+ const handleCheckFile = e => {
965
+ const file = e.target.files;
966
+ if (file[0]) {
967
+ if (file[0].size <= maxSize * Math.pow(2, 20)) {
968
+ if (fileExtensions.includes(file[0].type.split('/')[1])) {
969
+ if (file[0].type === 'application/pdf') {
970
+ setError('');
971
+ onChange({
972
+ file
973
+ });
974
+ setImage(pdfImageName);
975
+ } else {
976
+ setError('');
977
+ onChange({
978
+ file
979
+ });
980
+ setFileName(file[0].name);
981
+ setImage(URL.createObjectURL(file[0]));
982
+ }
983
+ } else {
984
+ setImage(null);
985
+ setError('ֆայլի սխալ ֆորմատ');
986
+ setFileName('no selected file');
987
+ }
977
988
  } else {
978
989
  setImage(null);
990
+ setError('առավելագույն ծավալ');
979
991
  setFileName('no selected file');
980
- setError('ֆայլի սխալ ֆորմատ');
981
992
  }
982
993
  } else {
983
994
  setImage(null);
995
+ setError('Ֆայլը ընտրված չէ');
984
996
  setFileName('no selected file');
985
- setError('առավելագույն ծավալ');
986
997
  }
987
- }
998
+ };
999
+ const handleRemoveFile = () => {
1000
+ setImage(null);
1001
+ onChange({
1002
+ target: null
1003
+ });
1004
+ setFileName('no selected file');
1005
+ document.querySelector(`.${name}`).value = "";
1006
+ };
988
1007
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
989
1008
  className: `${styles$2['file-form-title']} ile-form-title-rem`
990
1009
  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
@@ -994,30 +1013,18 @@ const File = ({
994
1013
  }, "*")), /*#__PURE__*/React.createElement("div", {
995
1014
  className: classnames(`${styles$2['file-form-wrap']} file-form-wrap-rem`, image ? styles$2['active'] : '')
996
1015
  }, /*#__PURE__*/React.createElement("div", {
1016
+ onChange: e => console.log(e),
997
1017
  className: `${styles$2['file-form']} file-form-rem`,
998
- onChange: e => {
999
- console.log(e);
1000
- },
1001
1018
  style: error || errorMesage ? {
1002
1019
  borderColor: 'red'
1003
1020
  } : {},
1004
- onClick: () => {
1005
- document.querySelector(`.${name}`).click();
1006
- }
1021
+ onClick: () => document.querySelector(`.${name}`).click()
1007
1022
  }, /*#__PURE__*/React.createElement("input", {
1023
+ hidden: true,
1008
1024
  type: "file",
1009
1025
  className: name,
1010
- hidden: true,
1011
1026
  disabled: disabled,
1012
- onChange: ({
1013
- target: {
1014
- files
1015
- }
1016
- }) => {
1017
- if (files[0]) {
1018
- fileType(files);
1019
- }
1020
- }
1027
+ onChange: e => handleCheckFile(e)
1021
1028
  }), image ? /*#__PURE__*/React.createElement("div", {
1022
1029
  className: `${styles$2['upload-file-content']} upload-file-content-rem`
1023
1030
  }, /*#__PURE__*/React.createElement("img", {
@@ -1034,16 +1041,9 @@ const File = ({
1034
1041
  className: `${styles$2['upload-info-txt']} upload-info-txt-rem`
1035
1042
  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.createElement("span", {
1036
1043
  className: `${styles$2['upload-info-size']} upload-info-size-rem`
1037
- }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 5\u0544\u0532 ( jpg, jpeg, png, pdf)"))), /*#__PURE__*/React.createElement("div", {
1044
+ }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), /*#__PURE__*/React.createElement("div", {
1038
1045
  className: `${styles$2['delete-upload-icon']} delete-upload-icon-rem`,
1039
- onClick: e => {
1040
- setFileName('no selected file');
1041
- setImage(null);
1042
- document.querySelector(`.${name}`).value = "";
1043
- onChange({
1044
- target: null
1045
- });
1046
- }
1046
+ onClick: handleRemoveFile
1047
1047
  }, /*#__PURE__*/React.createElement("i", {
1048
1048
  className: "icon-delete"
1049
1049
  })), errorMesage || error ? /*#__PURE__*/React.createElement("span", {
@@ -1053,16 +1053,20 @@ const File = ({
1053
1053
  }, errorMesage || error) : null));
1054
1054
  };
1055
1055
  File.propTypes = {
1056
- className: PropTypes.string,
1057
1056
  label: PropTypes.string,
1058
1057
  required: PropTypes.bool,
1059
1058
  disabled: PropTypes.bool,
1060
1059
  onChange: PropTypes.func,
1060
+ maxSize: PropTypes.number,
1061
+ className: PropTypes.string,
1061
1062
  errorMesage: PropTypes.string,
1062
- defaultData: PropTypes.object
1063
+ defaultData: PropTypes.object,
1064
+ fileExtensions: PropTypes.arrayOf(PropTypes.string)
1063
1065
  };
1064
1066
  File.defaultProps = {
1065
- required: false
1067
+ maxSize: 5,
1068
+ required: false,
1069
+ fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
1066
1070
  };
1067
1071
 
1068
1072
  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)}}";
package/dist/index.js CHANGED
@@ -281,7 +281,7 @@ const Autocomplate = ({
281
281
  className: `${styles$a['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
282
282
  }, /*#__PURE__*/React__default["default"].createElement("div", {
283
283
  className: `${styles$a['no-option']} autocomplate-no-option`
284
- }, inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` : 'տվյալներ չկան'))));
284
+ }, inputValue.length <= searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'))));
285
285
  }
286
286
  }
287
287
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -825,8 +825,8 @@ Stepper.propTypes = {
825
825
  activeSteps: PropTypes__default["default"].number
826
826
  };
827
827
 
828
- var css_248z$3 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.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%;z-index:1}.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:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 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;line-height:22px;margin-bottom:2px;min-height:46px;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}";
829
- var styles$3 = {"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"};
828
+ var css_248z$3 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.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%;z-index:1}.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:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 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;line-height:22px;margin-bottom:2px;min-height:46px;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}.select-module_error-message__-ac6X{border:2px solid #e00}.select-module_eMessage__Mm-F7{color:#e00}";
829
+ var styles$3 = {"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","error-message":"select-module_error-message__-ac6X","eMessage":"select-module_eMessage__Mm-F7"};
830
830
  styleInject(css_248z$3);
831
831
 
832
832
  const SelectTheme = {
@@ -895,7 +895,7 @@ const Select = ({
895
895
  className: styles$3['select-content'],
896
896
  id: styles$3.selector
897
897
  }, /*#__PURE__*/React__default["default"].createElement("div", {
898
- className: `${styles$3['select-content-top']} select-content-top-rem`,
898
+ className: `${styles$3['select-content-top']} select-content-top-rem ${eMessage ? styles$3['error-message'] : ''}`,
899
899
  onClick: () => {
900
900
  setOpened(!opened);
901
901
  }
@@ -956,46 +956,65 @@ var styles$2 = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form"
956
956
  styleInject(css_248z$2);
957
957
 
958
958
  const File = ({
959
- className,
959
+ name,
960
960
  label,
961
+ maxSize,
961
962
  required,
962
963
  disabled,
963
964
  onChange,
965
+ className,
964
966
  defaultData,
965
967
  errorMesage,
966
- name,
968
+ fileExtensions,
967
969
  ...props
968
970
  }) => {
969
971
  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
970
972
  const [image, setImage] = React.useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
971
973
  const [error, setError] = React.useState('');
972
974
  const [fileName, setFileName] = React.useState('no selected file');
973
- function fileType(file) {
974
- if (file[0].size <= 5000000) {
975
- if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
976
- setFileName(file[0].name);
977
- setImage(URL.createObjectURL(file[0]));
978
- onChange({
979
- file
980
- });
981
- setError('');
982
- } else if (file[0].type === 'application/pdf') {
983
- setImage(pdfImageName);
984
- onChange({
985
- file
986
- });
987
- setError('');
975
+ const handleCheckFile = e => {
976
+ const file = e.target.files;
977
+ if (file[0]) {
978
+ if (file[0].size <= maxSize * Math.pow(2, 20)) {
979
+ if (fileExtensions.includes(file[0].type.split('/')[1])) {
980
+ if (file[0].type === 'application/pdf') {
981
+ setError('');
982
+ onChange({
983
+ file
984
+ });
985
+ setImage(pdfImageName);
986
+ } else {
987
+ setError('');
988
+ onChange({
989
+ file
990
+ });
991
+ setFileName(file[0].name);
992
+ setImage(URL.createObjectURL(file[0]));
993
+ }
994
+ } else {
995
+ setImage(null);
996
+ setError('ֆայլի սխալ ֆորմատ');
997
+ setFileName('no selected file');
998
+ }
988
999
  } else {
989
1000
  setImage(null);
1001
+ setError('առավելագույն ծավալ');
990
1002
  setFileName('no selected file');
991
- setError('ֆայլի սխալ ֆորմատ');
992
1003
  }
993
1004
  } else {
994
1005
  setImage(null);
1006
+ setError('Ֆայլը ընտրված չէ');
995
1007
  setFileName('no selected file');
996
- setError('առավելագույն ծավալ');
997
1008
  }
998
- }
1009
+ };
1010
+ const handleRemoveFile = () => {
1011
+ setImage(null);
1012
+ onChange({
1013
+ target: null
1014
+ });
1015
+ setFileName('no selected file');
1016
+ document.querySelector(`.${name}`).value = "";
1017
+ };
999
1018
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
1000
1019
  className: `${styles$2['file-form-title']} ile-form-title-rem`
1001
1020
  }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
@@ -1005,30 +1024,18 @@ const File = ({
1005
1024
  }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
1006
1025
  className: classnames__default["default"](`${styles$2['file-form-wrap']} file-form-wrap-rem`, image ? styles$2['active'] : '')
1007
1026
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1027
+ onChange: e => console.log(e),
1008
1028
  className: `${styles$2['file-form']} file-form-rem`,
1009
- onChange: e => {
1010
- console.log(e);
1011
- },
1012
1029
  style: error || errorMesage ? {
1013
1030
  borderColor: 'red'
1014
1031
  } : {},
1015
- onClick: () => {
1016
- document.querySelector(`.${name}`).click();
1017
- }
1032
+ onClick: () => document.querySelector(`.${name}`).click()
1018
1033
  }, /*#__PURE__*/React__default["default"].createElement("input", {
1034
+ hidden: true,
1019
1035
  type: "file",
1020
1036
  className: name,
1021
- hidden: true,
1022
1037
  disabled: disabled,
1023
- onChange: ({
1024
- target: {
1025
- files
1026
- }
1027
- }) => {
1028
- if (files[0]) {
1029
- fileType(files);
1030
- }
1031
- }
1038
+ onChange: e => handleCheckFile(e)
1032
1039
  }), image ? /*#__PURE__*/React__default["default"].createElement("div", {
1033
1040
  className: `${styles$2['upload-file-content']} upload-file-content-rem`
1034
1041
  }, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -1045,16 +1052,9 @@ const File = ({
1045
1052
  className: `${styles$2['upload-info-txt']} upload-info-txt-rem`
1046
1053
  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default["default"].createElement("span", {
1047
1054
  className: `${styles$2['upload-info-size']} upload-info-size-rem`
1048
- }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 5\u0544\u0532 ( jpg, jpeg, png, pdf)"))), /*#__PURE__*/React__default["default"].createElement("div", {
1055
+ }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), /*#__PURE__*/React__default["default"].createElement("div", {
1049
1056
  className: `${styles$2['delete-upload-icon']} delete-upload-icon-rem`,
1050
- onClick: e => {
1051
- setFileName('no selected file');
1052
- setImage(null);
1053
- document.querySelector(`.${name}`).value = "";
1054
- onChange({
1055
- target: null
1056
- });
1057
- }
1057
+ onClick: handleRemoveFile
1058
1058
  }, /*#__PURE__*/React__default["default"].createElement("i", {
1059
1059
  className: "icon-delete"
1060
1060
  })), errorMesage || error ? /*#__PURE__*/React__default["default"].createElement("span", {
@@ -1064,16 +1064,20 @@ const File = ({
1064
1064
  }, errorMesage || error) : null));
1065
1065
  };
1066
1066
  File.propTypes = {
1067
- className: PropTypes__default["default"].string,
1068
1067
  label: PropTypes__default["default"].string,
1069
1068
  required: PropTypes__default["default"].bool,
1070
1069
  disabled: PropTypes__default["default"].bool,
1071
1070
  onChange: PropTypes__default["default"].func,
1071
+ maxSize: PropTypes__default["default"].number,
1072
+ className: PropTypes__default["default"].string,
1072
1073
  errorMesage: PropTypes__default["default"].string,
1073
- defaultData: PropTypes__default["default"].object
1074
+ defaultData: PropTypes__default["default"].object,
1075
+ fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
1074
1076
  };
1075
1077
  File.defaultProps = {
1076
- required: false
1078
+ maxSize: 5,
1079
+ required: false,
1080
+ fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
1077
1081
  };
1078
1082
 
1079
1083
  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)}}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.48",
3
+ "version": "0.0.49",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/autocomplate/index.js CHANGED
@@ -81,7 +81,7 @@ export const Autocomplate = ({
81
81
  <div className={`${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`}>
82
82
  <div className={`${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`}>
83
83
  <div className={`${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`}>
84
- <div className={`${styles['no-option']} autocomplate-no-option`}>{inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` : 'տվյալներ չկան'}</div>
84
+ <div className={`${styles['no-option']} autocomplate-no-option`}>{inputValue.length <= searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'}</div>
85
85
  </div>
86
86
  </div>
87
87
  </div>
package/src/components/file/file.stories.js CHANGED
@@ -11,14 +11,10 @@ const Template = (args) => <File {...args} />;
11
11
  export const Default = Template.bind({});
12
12
  Default.args = {
13
13
  label: 'ssa',
14
- onChange: (aa) => {
15
- console.log('barev', aa);
16
-
17
- },
14
+ onChange: _ => _,
18
15
  defaultData: {
19
16
  url: 'https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&w=1600',
20
17
  type: "image/png",
21
18
  },
22
19
  name: 'sss'
23
-
24
20
  };
package/src/components/file/index.js CHANGED
@@ -5,113 +5,126 @@ import styles from "./file.module.css";
5
5
  import Icon from '../icon/Icon'
6
6
 
7
7
  export const File = ({
8
- className,
8
+ name,
9
9
  label,
10
+ maxSize,
10
11
  required,
11
12
  disabled,
12
13
  onChange,
14
+ className,
13
15
  defaultData,
14
16
  errorMesage,
15
- name,
17
+ fileExtensions,
16
18
  ...props
17
19
  }) => {
18
20
  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ'
19
- const [image, setImage] = useState(defaultData ?
20
- defaultData.type != 'application/pdf' ?
21
- defaultData.url : pdfImageName : null);
21
+ const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
22
22
  const [error, setError] = useState('');
23
23
  const [fileName, setFileName] = useState('no selected file');
24
- function fileType(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})
30
- setError('')
31
24
 
32
- }
33
- else if (file[0].type === 'application/pdf') {
34
- setImage(pdfImageName)
35
- onChange({file})
36
- setError('')
25
+ const handleCheckFile = (e) => {
26
+ const file = e.target.files;
37
27
 
38
- }
39
- else {
28
+ if (file[0]) {
29
+ if (file[0].size <= maxSize * Math.pow(2, 20)) {
30
+ if (fileExtensions.includes(file[0].type.split('/')[1])) {
31
+ if (file[0].type === 'application/pdf') {
32
+ setError('');
33
+ onChange({file});
34
+ setImage(pdfImageName);
35
+ } else {
36
+ setError('');
37
+ onChange({file});
38
+ setFileName(file[0].name);
39
+ setImage(URL.createObjectURL(file[0]));
40
+ }
41
+ } else {
42
+ setImage(null)
43
+ setError('ֆայլի սխալ ֆորմատ');
44
+ setFileName('no selected file');
45
+ }
46
+ } else {
40
47
  setImage(null)
48
+ setError('առավելագույն ծավալ');
41
49
  setFileName('no selected file');
42
- setError('ֆայլի սխալ ֆորմատ')
43
50
  }
44
- }
45
- else {
51
+ } else {
46
52
  setImage(null)
53
+ setError('Ֆայլը ընտրված չէ');
47
54
  setFileName('no selected file');
48
- setError('առավելագույն ծավալ')
49
55
  }
50
- }
56
+ };
57
+
58
+ const handleRemoveFile = () => {
59
+ setImage(null);
60
+ onChange({ target: null });
61
+ setFileName('no selected file');
62
+ document.querySelector(`.${name}`).value = "";
63
+ };
51
64
 
52
65
  return (
53
66
  <>
54
- <p className={`${styles['file-form-title']} ile-form-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</p>
55
- <div className={classnames(`${styles['file-form-wrap']} file-form-wrap-rem`,image ? styles['active'] : '')}>
56
- <div
57
- className={`${styles['file-form']} file-form-rem`}
58
- onChange={(e) => { console.log(e) }}
67
+ <p className={`${styles['file-form-title']} ile-form-title-rem`}>
68
+ {label} {required && <sup style={{color: "#ee0000"}}>*</sup>}
69
+ </p>
70
+ <div className={classnames(`${styles['file-form-wrap']} file-form-wrap-rem`,image ? styles['active'] : '')}>
71
+ <div
72
+ onChange={(e) => console.log(e)}
73
+ className={`${styles['file-form']} file-form-rem`}
59
74
  style={error || errorMesage ? { borderColor: 'red' } : {}}
60
- onClick={() => {
61
- document.querySelector(`.${name}`).click()
62
- }}
63
- >
64
- <input type='file' className={name} hidden disabled={disabled}
65
- onChange={({ target: { files } }) => {
66
- if (files[0]) {
67
- fileType(files)
68
- }
69
- }}
70
- />
75
+ onClick={() => document.querySelector(`.${name}`).click()}
76
+ >
77
+ <input
78
+ hidden
79
+ type='file'
80
+ className={name}
81
+ disabled={disabled}
82
+ onChange={(e) => handleCheckFile(e)}
83
+ />
71
84
  {
72
- image ?
73
- <div className={`${styles['upload-file-content']} upload-file-content-rem`}>
74
- <img
75
- src={image}
76
- alt={fileName}
77
- />
78
- </div> :
79
- <div className={`${styles['file-form-inner-upload']} ile-form-inner-upload-rem`}>
80
- <img src="../../assets/upload.svg" alt=""/>
81
- <span className={`${styles['upload-info']} upload-info-rem`}><span className={`${styles['upload-info-txt']} upload-info-txt-rem`}>Բեռնել</span></span>
82
- <span className={`${styles['upload-info-size']} upload-info-size-rem`}>Առավելագույնը 5ՄԲ ( jpg, jpeg, png, pdf)</span>
83
- </div>
85
+ image ?
86
+ <div className={`${styles['upload-file-content']} upload-file-content-rem`}>
87
+ <img src={image} alt={fileName} />
88
+ </div> :
89
+ <div className={`${styles['file-form-inner-upload']} ile-form-inner-upload-rem`}>
90
+ <img src="../../assets/upload.svg" alt="" />
91
+ <span className={`${styles['upload-info']} upload-info-rem`}>
92
+ <span className={`${styles['upload-info-txt']} upload-info-txt-rem`}>Բեռնել</span>
93
+ </span>
94
+ <span className={`${styles['upload-info-size']} upload-info-size-rem`}>
95
+ Առավելագույնը {maxSize}ՄԲ ( { fileExtensions.toString().split(',').join(', ') } )
96
+ </span>
97
+ </div>
84
98
  }
85
- </div>
86
- <div className={`${styles['delete-upload-icon']} delete-upload-icon-rem`}
87
- onClick={(e) => {
88
- setFileName('no selected file');
89
- setImage(null);
90
- document.querySelector(`.${name}`).value = "";
91
- onChange({ target: null });
92
- }}>
93
- <i className="icon-delete"/>
94
- </div>
99
+ </div>
100
+ <div
101
+ className={`${styles['delete-upload-icon']} delete-upload-icon-rem`}
102
+ onClick={handleRemoveFile}
103
+ >
104
+ <i className="icon-delete"/>
105
+ </div>
95
106
  {
96
- errorMesage || error ? <span style={{ color: 'red' }}>{errorMesage || error}</span> : null
107
+ errorMesage || error ? <span style={{ color: 'red' }}>{errorMesage || error}</span> : null
97
108
  }
98
109
  </div>
99
- </>
110
+ </>
100
111
  );
101
112
  };
102
113
 
103
114
  File.propTypes = {
104
- className: PropTypes.string,
105
115
  label: PropTypes.string,
106
116
  required: PropTypes.bool,
107
117
  disabled: PropTypes.bool,
108
118
  onChange: PropTypes.func,
119
+ maxSize: PropTypes.number,
120
+ className: PropTypes.string,
109
121
  errorMesage: PropTypes.string,
110
- defaultData: PropTypes.object
122
+ defaultData: PropTypes.object,
123
+ fileExtensions: PropTypes.arrayOf(PropTypes.string)
111
124
  };
112
125
 
113
-
114
-
115
126
  File.defaultProps = {
127
+ maxSize: 5,
116
128
  required: false,
117
- };
129
+ fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
130
+ };
package/src/components/select/index.js CHANGED
@@ -78,7 +78,7 @@ export const Select = ({
78
78
  <div className={`${styles['select-wrap']} select-wrap-rem`} ref={ref}>
79
79
  <div className={styles['select-content']} id={styles.selector}>
80
80
  <div
81
- className={`${styles['select-content-top']} select-content-top-rem`}
81
+ className={`${styles['select-content-top']} select-content-top-rem ${eMessage ? styles['error-message'] : ''}`}
82
82
  onClick={() => {
83
83
  setOpened(!opened)
84
84
  }}
package/src/components/select/select.module.css CHANGED
@@ -109,4 +109,12 @@
109
109
  .select-content-bottom-row:hover {
110
110
  background: unset;
111
111
  color: #00236A;;
112
- }
112
+ }
113
+
114
+ .error-message {
115
+ border: 2px solid rgb(238, 0, 0);
116
+ }
117
+
118
+ .eMessage {
119
+ color: rgba(238, 0, 0, 1);
120
+ }