sag_components 2.0.0-beta185 → 2.0.0-beta186
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.
- package/dist/index.esm.js +32 -31
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +32 -31
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -35620,7 +35620,7 @@ const Input$2 = _ref => {
|
|
|
35620
35620
|
disabled,
|
|
35621
35621
|
isDarkerBackground = false,
|
|
35622
35622
|
width,
|
|
35623
|
-
height =
|
|
35623
|
+
height = "50px",
|
|
35624
35624
|
error,
|
|
35625
35625
|
errorMessage,
|
|
35626
35626
|
labelColor,
|
|
@@ -35634,7 +35634,7 @@ const Input$2 = _ref => {
|
|
|
35634
35634
|
maxLength
|
|
35635
35635
|
} = _ref;
|
|
35636
35636
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
35637
|
-
const [inputValue, setInputValue] = React$1.useState(
|
|
35637
|
+
const [inputValue, setInputValue] = React$1.useState("");
|
|
35638
35638
|
const [showPassword, setShowPassword] = React$1.useState(false);
|
|
35639
35639
|
const inputRef = React$1.useRef(null);
|
|
35640
35640
|
const containerRef = React$1.useRef(null);
|
|
@@ -35655,7 +35655,7 @@ const Input$2 = _ref => {
|
|
|
35655
35655
|
inputRef?.current?.focus();
|
|
35656
35656
|
}
|
|
35657
35657
|
onChange({
|
|
35658
|
-
newValue: e.target.value ||
|
|
35658
|
+
newValue: e.target.value || ""
|
|
35659
35659
|
});
|
|
35660
35660
|
};
|
|
35661
35661
|
const handleFocus = () => {
|
|
@@ -35681,18 +35681,18 @@ const Input$2 = _ref => {
|
|
|
35681
35681
|
});
|
|
35682
35682
|
};
|
|
35683
35683
|
const getLeftIcon = () => {
|
|
35684
|
-
if (!leftIcon || leftIcon ===
|
|
35685
|
-
return getIcon(leftIcon,
|
|
35684
|
+
if (!leftIcon || leftIcon === "none") return "";
|
|
35685
|
+
return getIcon(leftIcon, "14px", "14px", error ? "red" : labelColor, disabled, "pointer", leftIconOnClickHandler);
|
|
35686
35686
|
};
|
|
35687
35687
|
const getRightIcon = () => {
|
|
35688
|
-
if (!rightIcon || rightIcon ===
|
|
35689
|
-
return getIcon(rightIcon,
|
|
35688
|
+
if (!rightIcon || rightIcon === "none") return "";
|
|
35689
|
+
return getIcon(rightIcon, "14px", "14px", error ? "red" : labelColor, disabled, "pointer", rightIconOnClickHandler);
|
|
35690
35690
|
};
|
|
35691
35691
|
const toggleShowPassword = () => {
|
|
35692
35692
|
setShowPassword(!showPassword);
|
|
35693
35693
|
};
|
|
35694
35694
|
const getPasswordIcon = () => {
|
|
35695
|
-
if (!password) return
|
|
35695
|
+
if (!password) return "";
|
|
35696
35696
|
if (showPassword) {
|
|
35697
35697
|
return /*#__PURE__*/React__default["default"].createElement(IconWrapper$1, {
|
|
35698
35698
|
className: "passwordEyeSlash",
|
|
@@ -35700,16 +35700,16 @@ const Input$2 = _ref => {
|
|
|
35700
35700
|
onClick: toggleShowPassword
|
|
35701
35701
|
}, /*#__PURE__*/React__default["default"].createElement(FaEyeSlash, {
|
|
35702
35702
|
onClick: toggleShowPassword,
|
|
35703
|
-
color: error ?
|
|
35703
|
+
color: error ? "red" : labelColor
|
|
35704
35704
|
}));
|
|
35705
35705
|
}
|
|
35706
|
-
return getIcon(
|
|
35706
|
+
return getIcon("eye", "14px", "14px", error ? "red" : labelColor, disabled, "pointer", toggleShowPassword);
|
|
35707
35707
|
};
|
|
35708
35708
|
|
|
35709
35709
|
// Calculate dynamic height for multiline inputs
|
|
35710
35710
|
const calculateHeight = () => {
|
|
35711
35711
|
if (!multiline) return height;
|
|
35712
|
-
const baseHeight = size ===
|
|
35712
|
+
const baseHeight = size === "small" ? 32 : 52;
|
|
35713
35713
|
const lineHeight = 20;
|
|
35714
35714
|
const padding = 10;
|
|
35715
35715
|
return `${baseHeight + (rows - 1) * lineHeight + padding}px`;
|
|
@@ -35722,7 +35722,8 @@ const Input$2 = _ref => {
|
|
|
35722
35722
|
size: size,
|
|
35723
35723
|
disabled: disabled,
|
|
35724
35724
|
isDarkerBackground: isDarkerBackground,
|
|
35725
|
-
multiline: multiline
|
|
35725
|
+
multiline: multiline,
|
|
35726
|
+
onClick: onClick
|
|
35726
35727
|
}, /*#__PURE__*/React__default["default"].createElement(InputContainer, {
|
|
35727
35728
|
className: "InputContainer",
|
|
35728
35729
|
labelColor: labelColor,
|
|
@@ -35748,7 +35749,7 @@ const Input$2 = _ref => {
|
|
|
35748
35749
|
isFocused: isFocused,
|
|
35749
35750
|
labelColor: labelColor,
|
|
35750
35751
|
hasValue: inputValue,
|
|
35751
|
-
leftIcon: !multiline ? leftIcon :
|
|
35752
|
+
leftIcon: !multiline ? leftIcon : "none",
|
|
35752
35753
|
disabled: disabled,
|
|
35753
35754
|
isDarkerBackground: isDarkerBackground,
|
|
35754
35755
|
error: error,
|
|
@@ -35758,13 +35759,13 @@ const Input$2 = _ref => {
|
|
|
35758
35759
|
multiline: multiline
|
|
35759
35760
|
}, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
35760
35761
|
style: {
|
|
35761
|
-
color: disabled ?
|
|
35762
|
-
height:
|
|
35762
|
+
color: disabled ? "#D0D0D0" : "red",
|
|
35763
|
+
height: "16px"
|
|
35763
35764
|
}
|
|
35764
35765
|
}, "*")), /*#__PURE__*/React__default["default"].createElement(InputElement, {
|
|
35765
35766
|
className: multiline ? "StyledTextarea" : "StyledInput",
|
|
35766
35767
|
ref: inputRef,
|
|
35767
|
-
type: password && !showPassword ?
|
|
35768
|
+
type: password && !showPassword ? "password" : "text",
|
|
35768
35769
|
value: inputValue,
|
|
35769
35770
|
onChange: handleInputChange,
|
|
35770
35771
|
onClick: handleLabelClick,
|
|
@@ -35772,7 +35773,7 @@ const Input$2 = _ref => {
|
|
|
35772
35773
|
onBlur: handleBlur,
|
|
35773
35774
|
disabled: disabled,
|
|
35774
35775
|
isDarkerBackground: isDarkerBackground,
|
|
35775
|
-
placeholder: isFocused ? placeHolder :
|
|
35776
|
+
placeholder: isFocused ? placeHolder : "",
|
|
35776
35777
|
error: error,
|
|
35777
35778
|
height: calculateHeight(),
|
|
35778
35779
|
isFocused: isFocused,
|
|
@@ -35784,10 +35785,10 @@ const Input$2 = _ref => {
|
|
|
35784
35785
|
width: width
|
|
35785
35786
|
}, errorMessage), multiline && maxLength && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
35786
35787
|
style: {
|
|
35787
|
-
fontSize:
|
|
35788
|
-
color: inputValue.length > maxLength * 0.9 ?
|
|
35789
|
-
textAlign:
|
|
35790
|
-
marginTop:
|
|
35788
|
+
fontSize: "12px",
|
|
35789
|
+
color: inputValue.length > maxLength * 0.9 ? "orange" : "#666",
|
|
35790
|
+
textAlign: "right",
|
|
35791
|
+
marginTop: "4px"
|
|
35791
35792
|
}
|
|
35792
35793
|
}, inputValue.length, "/", maxLength));
|
|
35793
35794
|
};
|
|
@@ -35816,19 +35817,19 @@ Input$2.propTypes = {
|
|
|
35816
35817
|
maxLength: PropTypes.number
|
|
35817
35818
|
};
|
|
35818
35819
|
Input$2.defaultProps = {
|
|
35819
|
-
placeHolder:
|
|
35820
|
-
label:
|
|
35821
|
-
labelEmptyValue:
|
|
35822
|
-
size:
|
|
35823
|
-
labelColor:
|
|
35820
|
+
placeHolder: "Type...",
|
|
35821
|
+
label: "",
|
|
35822
|
+
labelEmptyValue: "",
|
|
35823
|
+
size: "medium",
|
|
35824
|
+
labelColor: "#066768",
|
|
35824
35825
|
required: true,
|
|
35825
|
-
width:
|
|
35826
|
+
width: "300px",
|
|
35826
35827
|
disabled: false,
|
|
35827
35828
|
error: false,
|
|
35828
|
-
errorMessage:
|
|
35829
|
-
selectedValue:
|
|
35830
|
-
leftIcon:
|
|
35831
|
-
rightIcon:
|
|
35829
|
+
errorMessage: "",
|
|
35830
|
+
selectedValue: "",
|
|
35831
|
+
leftIcon: "none",
|
|
35832
|
+
rightIcon: "none",
|
|
35832
35833
|
leftIconOnClick: () => {},
|
|
35833
35834
|
rightIconOnClick: () => {},
|
|
35834
35835
|
onBlur: () => {},
|