Skip to content

Commit

Permalink
Merge branch 'main' into error-utils-refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
seekshiva authored May 31, 2024
2 parents d253803 + 9c6a87c commit f843709
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 68 deletions.
4 changes: 2 additions & 2 deletions src/Components/DropdownField.res
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,12 @@ let make = (
<div className={`Input ${className} appearance-none relative`}>
<RenderIf condition={isDisplayValueVisible && displayValue->Option.isSome}>
<div
className="absolute top-2.5 right-0 left-2 bottom-0 pointer-events-none rounded-sm"
className="absolute top-1 left-1 right-0 bottom-0 pointer-events-none rounded-sm z-20 whitespace-nowrap"
style={
background: disabled ? disbaledBG : themeObj.colorBackground,
opacity: disabled ? "35%" : "",
padding: themeObj.spacingUnit,
width: "100%",
width: "95%",
}>
{React.string(displayValue->Option.getOr(""))}
</div>
Expand Down
149 changes: 84 additions & 65 deletions src/Components/PaymentField.res
Original file line number Diff line number Diff line change
Expand Up @@ -87,22 +87,10 @@ let make = (

let flexDirectionBasedOnType = type_ === "tel" ? "flex-row" : "flex-col"

<div className={`flex ${flexDirectionBasedOnType} w-full`} style={color: themeObj.colorText}>
<RenderIf condition={type_ === "tel"}>
<DropdownField
appearance=config.appearance
value={valueDropDown->Option.getOr("")}
setValue={setValueDropDown->Option.getOr(_ => ())}
fieldName={dropDownFieldName->Option.getOr("")}
options={dropDownOptions->Option.getOr([])}
width="w-1/3 mr-2"
displayValue={displayValue->Option.getOr("")}
setDisplayValue={setDisplayValue->Option.getOr(_ => ())}
isDisplayValueVisible=true
/>
</RenderIf>
<div className="flex flex-col">
<RenderIf
condition={fieldName->String.length > 0 &&
condition={name === "phone" &&
fieldName->String.length > 0 &&
config.appearance.labels == Above &&
isSpacedInnerLayout}>
<div
Expand All @@ -116,59 +104,90 @@ let make = (
{React.string(fieldName)}
</div>
</RenderIf>
<div className="flex flex-row w-full" style={direction: direction}>
<div className="relative w-full">
<input
style={
background: backgroundClass,
padding: themeObj.spacingUnit,
width: "100%",
}
disabled=readOnly
ref={inputRef->ReactDOM.Ref.domRef}
type_
name
?maxLength
?pattern
className={`${inputClassStyles} ${inputClass} ${className} focus:outline-none transition-shadow ease-out duration-200`}
placeholder={config.appearance.labels == Above || config.appearance.labels == Never
? placeholder
: ""}
value={value.value}
autoComplete="on"
onChange
onBlur=handleBlur
onFocus=handleFocus
<div className={`flex ${flexDirectionBasedOnType} w-full`} style={color: themeObj.colorText}>
<RenderIf condition={type_ === "tel"}>
<DropdownField
appearance=config.appearance
value={valueDropDown->Option.getOr("")}
setValue={setValueDropDown->Option.getOr(_ => ())}
fieldName={dropDownFieldName->Option.getOr("")}
options={dropDownOptions->Option.getOr([])}
width="w-1/3 mr-2"
displayValue={displayValue->Option.getOr("")}
setDisplayValue={setDisplayValue->Option.getOr(_ => ())}
isDisplayValueVisible=true
/>
<RenderIf condition={config.appearance.labels == Floating}>
<div
className={`Label ${floatinglabelClass} ${labelClass} absolute bottom-0 ml-3 ${focusClass}`}
</RenderIf>
<RenderIf
condition={name !== "phone" &&
fieldName->String.length > 0 &&
config.appearance.labels == Above &&
isSpacedInnerLayout}>
<div
className={`Label ${labelClass}`}
style={
fontWeight: themeObj.fontWeightNormal,
fontSize: themeObj.fontSizeLg,
marginBottom: "5px",
opacity: "0.6",
}>
{React.string(fieldName)}
</div>
</RenderIf>
<div className="flex flex-row w-full" style={direction: direction}>
<div className="relative w-full">
<input
style={
marginBottom: {
inputFocused || value.value->String.length > 0 ? "" : themeObj.spacingUnit
},
fontSize: {
inputFocused || value.value->String.length > 0 ? themeObj.fontSizeXs : ""
},
opacity: "0.6",
}>
{React.string(fieldName)}
</div>
</RenderIf>
background: backgroundClass,
padding: themeObj.spacingUnit,
width: "100%",
}
disabled=readOnly
ref={inputRef->ReactDOM.Ref.domRef}
type_
name
?maxLength
?pattern
className={`${inputClassStyles} ${inputClass} ${className} focus:outline-none transition-shadow ease-out duration-200`}
placeholder={config.appearance.labels == Above || config.appearance.labels == Never
? placeholder
: ""}
value={value.value}
autoComplete="on"
onChange
onBlur=handleBlur
onFocus=handleFocus
/>
<RenderIf condition={config.appearance.labels == Floating}>
<div
className={`Label ${floatinglabelClass} ${labelClass} absolute bottom-0 ml-3 ${focusClass}`}
style={
marginBottom: {
inputFocused || value.value->String.length > 0 ? "" : themeObj.spacingUnit
},
fontSize: {
inputFocused || value.value->String.length > 0 ? themeObj.fontSizeXs : ""
},
opacity: "0.6",
}>
{React.string(fieldName)}
</div>
</RenderIf>
</div>
<div className={`relative flex -ml-10 items-center`}> {rightIcon} </div>
</div>
<div className={`relative flex -ml-10 items-center`}> {rightIcon} </div>
<RenderIf condition={value.errorString->String.length > 0}>
<div
className="Error pt-1"
style={
color: themeObj.colorDangerText,
fontSize: themeObj.fontSizeSm,
alignSelf: "start",
textAlign: "left",
}>
{React.string(value.errorString)}
</div>
</RenderIf>
</div>
<RenderIf condition={value.errorString->String.length > 0}>
<div
className="Error pt-1"
style={
color: themeObj.colorDangerText,
fontSize: themeObj.fontSizeSm,
alignSelf: "start",
textAlign: "left",
}>
{React.string(value.errorString)}
</div>
</RenderIf>
</div>
}
2 changes: 1 addition & 1 deletion src/Components/PhoneNumberPaymentInput.res
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ let make = () => {
type_="tel"
name="phone"
inputRef=phoneRef
placeholder="+351 200 000 000"
placeholder="000 000 000"
maxLength=14
dropDownOptions=phoneNumberCodeOptions
valueDropDown
Expand Down

0 comments on commit f843709

Please sign in to comment.