Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: mb_way ui fix #407

Merged
merged 4 commits into from
May 31, 2024
Merged

fix: mb_way ui fix #407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4c58c08
fix: mb_way ui fix
PritishBudhiraja May 30, 2024
063f8cc
Merge branch 'main' into mb-way-ui-break
PritishBudhiraja May 30, 2024
f2a87eb
Merge branch 'main' into mb-way-ui-break
PritishBudhiraja May 30, 2024
45a5aef
Merge branch 'main' into mb-way-ui-break
PritishBudhiraja May 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/Components/DropdownField.res
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading