feat: add side prop to TooltipBetter component for customizable tooltip positioning
This commit is contained in:
parent
ad668ca5eb
commit
79b6081bb4
|
|
@ -10,12 +10,14 @@ import { getNumber } from "@/lib/utils/getNumber";
|
|||
import { useLocal } from "@/lib/utils/use-local";
|
||||
import { FieldRadio } from "./field/TypeRadio";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { TooltipBetter } from "../ui/tooltip-better";
|
||||
|
||||
export const Field: React.FC<{
|
||||
fm: any;
|
||||
label?: string;
|
||||
name: string;
|
||||
isBetter?: boolean;
|
||||
tooltip?: string;
|
||||
onLoad?: () => Promise<any> | any;
|
||||
type?:
|
||||
| "rating"
|
||||
|
|
@ -70,6 +72,7 @@ export const Field: React.FC<{
|
|||
suffix,
|
||||
allowNew,
|
||||
unique = true,
|
||||
tooltip,
|
||||
}) => {
|
||||
let result = null;
|
||||
const field = useLocal({
|
||||
|
|
@ -155,211 +158,215 @@ export const Field: React.FC<{
|
|||
) : (
|
||||
<></>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
error
|
||||
? "flex flex-row rounded-md flex-grow border-red-500 border items-center"
|
||||
: "flex flex-row rounded-md flex-grow items-center",
|
||||
is_disable
|
||||
? "border border-gray-100 bg-gray-100"
|
||||
: "border border-gray-300 ",
|
||||
"relative field",
|
||||
!is_disable
|
||||
? style === "underline" || style === "gform"
|
||||
? "focus-within:border-b focus-within:border-b-primary"
|
||||
: "focus-within:border focus-within:border-primary"
|
||||
: "",
|
||||
style === "underline" || style === "gform"
|
||||
? "rounded-none border-transparent border-b-gray-300"
|
||||
: "",
|
||||
[
|
||||
"rating",
|
||||
"color",
|
||||
"single-checkbox",
|
||||
"radio",
|
||||
"checkbox",
|
||||
].includes(type) &&
|
||||
css`
|
||||
border: 0px !important;
|
||||
`,
|
||||
["upload"].includes(type) &&
|
||||
css`
|
||||
padding: 0px !important;
|
||||
`,
|
||||
classField
|
||||
)}
|
||||
>
|
||||
{before && (
|
||||
<div
|
||||
// ref={prefixRef}
|
||||
className={cx(
|
||||
"px-1 py-1 items-center flex flex-row flex-grow rounded-l-md h-full",
|
||||
<TooltipBetter content={tooltip} side="bottom">
|
||||
<div
|
||||
className={cn(
|
||||
error
|
||||
? "flex flex-row rounded-md flex-grow border-red-500 border items-center"
|
||||
: "flex flex-row rounded-md flex-grow items-center",
|
||||
is_disable
|
||||
? "border border-gray-100 bg-gray-100"
|
||||
: "border border-gray-300 ",
|
||||
"relative field",
|
||||
!is_disable
|
||||
? style === "underline" || style === "gform"
|
||||
? "focus-within:border-b focus-within:border-b-primary"
|
||||
: "focus-within:border focus-within:border-primary"
|
||||
: "",
|
||||
style === "underline" || style === "gform"
|
||||
? "rounded-none border-transparent border-b-gray-300"
|
||||
: "",
|
||||
[
|
||||
"rating",
|
||||
"color",
|
||||
"single-checkbox",
|
||||
"radio",
|
||||
"checkbox",
|
||||
].includes(type) &&
|
||||
css`
|
||||
height: 2.13rem;
|
||||
`
|
||||
// style === "gform"
|
||||
// ? ""
|
||||
// : is_disable
|
||||
// ? "bg-gray-200/50 "
|
||||
// : "bg-gray-200/50 "
|
||||
)}
|
||||
>
|
||||
{before}
|
||||
</div>
|
||||
)}
|
||||
{["upload"].includes(type) ? (
|
||||
<>
|
||||
<TypeUpload
|
||||
fm={fm}
|
||||
name={name}
|
||||
on_change={onChange}
|
||||
mode={"upload"}
|
||||
disabled={is_disable}
|
||||
/>
|
||||
</>
|
||||
) : ["multi-upload"].includes(type) ? (
|
||||
<>
|
||||
<TypeUpload
|
||||
fm={fm}
|
||||
name={name}
|
||||
on_change={onChange}
|
||||
mode={"upload"}
|
||||
type="multi"
|
||||
disabled={is_disable}
|
||||
/>
|
||||
</>
|
||||
) : ["dropdown"].includes(type) ? (
|
||||
<>
|
||||
<TypeDropdown
|
||||
fm={fm}
|
||||
required={required}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
allowNew={allowNew}
|
||||
/>
|
||||
</>
|
||||
) : ["multi-dropdown"].includes(type) ? (
|
||||
<>
|
||||
<TypeDropdown
|
||||
fm={fm}
|
||||
required={required}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
mode="multi"
|
||||
unique={unique}
|
||||
isBetter={isBetter}
|
||||
/>
|
||||
</>
|
||||
) : ["checkbox"].includes(type) ? (
|
||||
<>
|
||||
<FieldCheckbox
|
||||
fm={fm}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
className={className}
|
||||
/>
|
||||
</>
|
||||
) : ["radio"].includes(type) ? (
|
||||
<>
|
||||
<FieldRadio
|
||||
fm={fm}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
className={className}
|
||||
/>
|
||||
</>
|
||||
) : ["single-checkbox"].includes(type) ? (
|
||||
<>
|
||||
<FieldCheckbox
|
||||
fm={fm}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
className={className}
|
||||
onChange={onChange}
|
||||
mode="single"
|
||||
/>
|
||||
</>
|
||||
) : ["richtext"].includes(type) ? (
|
||||
<>
|
||||
<TypeRichText
|
||||
fm={fm}
|
||||
name={name}
|
||||
disabled={is_disable}
|
||||
className={className}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</>
|
||||
) : ["tag"].includes(type) ? (
|
||||
<>
|
||||
<TypeTag
|
||||
fm={fm}
|
||||
name={name}
|
||||
disabled={is_disable}
|
||||
className={className}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TypeInput
|
||||
fm={fm}
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
type={type}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
onFocus={() => {
|
||||
field.focus = true;
|
||||
field.render();
|
||||
}}
|
||||
className={cx(
|
||||
before &&
|
||||
css`
|
||||
padding-left: ${getNumber(
|
||||
get(prefixRef, "current.clientWidth")
|
||||
) + 10}px;
|
||||
`,
|
||||
after &&
|
||||
css`
|
||||
padding-right: ${getNumber(
|
||||
get(suffixRef, "current.clientWidth")
|
||||
) + 10}px;
|
||||
`,
|
||||
className
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{after && (
|
||||
<div
|
||||
// ref={suffixRef}
|
||||
className={cx(
|
||||
"px-1 py-1 items-center flex flex-row flex-grow rounded-r-md h-full",
|
||||
css`
|
||||
height: 2.13rem;
|
||||
border: 0px !important;
|
||||
`,
|
||||
is_disable ? "bg-gray-200/50 " : "bg-gray-200/50 "
|
||||
)}
|
||||
>
|
||||
{after}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
["upload"].includes(type) &&
|
||||
css`
|
||||
padding: 0px !important;
|
||||
`,
|
||||
classField
|
||||
)}
|
||||
>
|
||||
{before && (
|
||||
<div
|
||||
// ref={prefixRef}
|
||||
className={cx(
|
||||
"px-1 py-1 items-center flex flex-row flex-grow rounded-l-md h-full",
|
||||
css`
|
||||
height: 2.13rem;
|
||||
`
|
||||
// style === "gform"
|
||||
// ? ""
|
||||
// : is_disable
|
||||
// ? "bg-gray-200/50 "
|
||||
// : "bg-gray-200/50 "
|
||||
)}
|
||||
>
|
||||
{before}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{["upload"].includes(type) ? (
|
||||
<>
|
||||
<TypeUpload
|
||||
fm={fm}
|
||||
name={name}
|
||||
on_change={onChange}
|
||||
mode={"upload"}
|
||||
disabled={is_disable}
|
||||
/>
|
||||
</>
|
||||
) : ["multi-upload"].includes(type) ? (
|
||||
<>
|
||||
<TypeUpload
|
||||
fm={fm}
|
||||
name={name}
|
||||
on_change={onChange}
|
||||
mode={"upload"}
|
||||
type="multi"
|
||||
disabled={is_disable}
|
||||
/>
|
||||
</>
|
||||
) : ["dropdown"].includes(type) ? (
|
||||
<>
|
||||
<TypeDropdown
|
||||
fm={fm}
|
||||
required={required}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
allowNew={allowNew}
|
||||
/>
|
||||
</>
|
||||
) : ["multi-dropdown"].includes(type) ? (
|
||||
<>
|
||||
<TypeDropdown
|
||||
fm={fm}
|
||||
required={required}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
mode="multi"
|
||||
unique={unique}
|
||||
isBetter={isBetter}
|
||||
/>
|
||||
</>
|
||||
) : ["checkbox"].includes(type) ? (
|
||||
<>
|
||||
<FieldCheckbox
|
||||
fm={fm}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
className={className}
|
||||
/>
|
||||
</>
|
||||
) : ["radio"].includes(type) ? (
|
||||
<>
|
||||
<FieldRadio
|
||||
fm={fm}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
className={className}
|
||||
/>
|
||||
</>
|
||||
) : ["single-checkbox"].includes(type) ? (
|
||||
<>
|
||||
<FieldCheckbox
|
||||
fm={fm}
|
||||
name={name}
|
||||
onLoad={onLoad}
|
||||
placeholder={placeholder}
|
||||
disabled={is_disable}
|
||||
className={className}
|
||||
onChange={onChange}
|
||||
mode="single"
|
||||
/>
|
||||
</>
|
||||
) : ["richtext"].includes(type) ? (
|
||||
<>
|
||||
<TypeRichText
|
||||
fm={fm}
|
||||
name={name}
|
||||
disabled={is_disable}
|
||||
className={className}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</>
|
||||
) : ["tag"].includes(type) ? (
|
||||
<>
|
||||
<TypeTag
|
||||
fm={fm}
|
||||
name={name}
|
||||
disabled={is_disable}
|
||||
className={className}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TypeInput
|
||||
fm={fm}
|
||||
name={name}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
type={type}
|
||||
disabled={is_disable}
|
||||
onChange={onChange}
|
||||
onFocus={() => {
|
||||
field.focus = true;
|
||||
field.render();
|
||||
}}
|
||||
className={cx(
|
||||
before &&
|
||||
css`
|
||||
padding-left: ${getNumber(
|
||||
get(prefixRef, "current.clientWidth")
|
||||
) + 10}px;
|
||||
`,
|
||||
after &&
|
||||
css`
|
||||
padding-right: ${getNumber(
|
||||
get(suffixRef, "current.clientWidth")
|
||||
) + 10}px;
|
||||
`,
|
||||
className
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{after && (
|
||||
<div
|
||||
// ref={suffixRef}
|
||||
className={cx(
|
||||
"px-1 py-1 items-center flex flex-row flex-grow rounded-r-md h-full",
|
||||
css`
|
||||
height: 2.13rem;
|
||||
`,
|
||||
is_disable ? "bg-gray-200/50 " : "bg-gray-200/50 "
|
||||
)}
|
||||
>
|
||||
{after}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TooltipBetter>
|
||||
|
||||
{error ? (
|
||||
<div className="text-sm text-red-500 py-1">{error}</div>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import {
|
|||
TooltipTrigger,
|
||||
} from "./tooltip";
|
||||
|
||||
export const TooltipBetter: FC<any> = ({ content, children }) => {
|
||||
export const TooltipBetter: FC<any> = ({ content, children, side = "top" }) => {
|
||||
if (content) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
|
|
@ -14,7 +14,10 @@ export const TooltipBetter: FC<any> = ({ content, children }) => {
|
|||
<TooltipTrigger asChild>
|
||||
<div className="w-full flex flex-grow flex-row">{children}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="bg-linear-sidebar-active text-white border border-primary shadow-md transition-all ">
|
||||
<TooltipContent
|
||||
side={side}
|
||||
className="bg-linear-sidebar-active text-white border border-primary shadow-md transition-all "
|
||||
>
|
||||
<p>{content}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
|
|
|||
Loading…
Reference in New Issue