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 { useLocal } from "@/lib/utils/use-local";
|
||||||
import { FieldRadio } from "./field/TypeRadio";
|
import { FieldRadio } from "./field/TypeRadio";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { TooltipBetter } from "../ui/tooltip-better";
|
||||||
|
|
||||||
export const Field: React.FC<{
|
export const Field: React.FC<{
|
||||||
fm: any;
|
fm: any;
|
||||||
label?: string;
|
label?: string;
|
||||||
name: string;
|
name: string;
|
||||||
isBetter?: boolean;
|
isBetter?: boolean;
|
||||||
|
tooltip?: string;
|
||||||
onLoad?: () => Promise<any> | any;
|
onLoad?: () => Promise<any> | any;
|
||||||
type?:
|
type?:
|
||||||
| "rating"
|
| "rating"
|
||||||
|
|
@ -70,6 +72,7 @@ export const Field: React.FC<{
|
||||||
suffix,
|
suffix,
|
||||||
allowNew,
|
allowNew,
|
||||||
unique = true,
|
unique = true,
|
||||||
|
tooltip,
|
||||||
}) => {
|
}) => {
|
||||||
let result = null;
|
let result = null;
|
||||||
const field = useLocal({
|
const field = useLocal({
|
||||||
|
|
@ -155,211 +158,215 @@ export const Field: React.FC<{
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
<div
|
<TooltipBetter content={tooltip} side="bottom">
|
||||||
className={cn(
|
<div
|
||||||
error
|
className={cn(
|
||||||
? "flex flex-row rounded-md flex-grow border-red-500 border items-center"
|
error
|
||||||
: "flex flex-row rounded-md flex-grow items-center",
|
? "flex flex-row rounded-md flex-grow border-red-500 border items-center"
|
||||||
is_disable
|
: "flex flex-row rounded-md flex-grow items-center",
|
||||||
? "border border-gray-100 bg-gray-100"
|
is_disable
|
||||||
: "border border-gray-300 ",
|
? "border border-gray-100 bg-gray-100"
|
||||||
"relative field",
|
: "border border-gray-300 ",
|
||||||
!is_disable
|
"relative field",
|
||||||
? style === "underline" || style === "gform"
|
!is_disable
|
||||||
? "focus-within:border-b focus-within:border-b-primary"
|
? style === "underline" || style === "gform"
|
||||||
: "focus-within:border focus-within:border-primary"
|
? "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"
|
style === "underline" || style === "gform"
|
||||||
: "",
|
? "rounded-none border-transparent border-b-gray-300"
|
||||||
[
|
: "",
|
||||||
"rating",
|
[
|
||||||
"color",
|
"rating",
|
||||||
"single-checkbox",
|
"color",
|
||||||
"radio",
|
"single-checkbox",
|
||||||
"checkbox",
|
"radio",
|
||||||
].includes(type) &&
|
"checkbox",
|
||||||
css`
|
].includes(type) &&
|
||||||
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",
|
|
||||||
css`
|
css`
|
||||||
height: 2.13rem;
|
border: 0px !important;
|
||||||
`
|
|
||||||
// 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 "
|
["upload"].includes(type) &&
|
||||||
)}
|
css`
|
||||||
>
|
padding: 0px !important;
|
||||||
{after}
|
`,
|
||||||
</div>
|
classField
|
||||||
)}
|
)}
|
||||||
</div>
|
>
|
||||||
|
{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 ? (
|
{error ? (
|
||||||
<div className="text-sm text-red-500 py-1">{error}</div>
|
<div className="text-sm text-red-500 py-1">{error}</div>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import {
|
||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
} from "./tooltip";
|
} from "./tooltip";
|
||||||
|
|
||||||
export const TooltipBetter: FC<any> = ({ content, children }) => {
|
export const TooltipBetter: FC<any> = ({ content, children, side = "top" }) => {
|
||||||
if (content) {
|
if (content) {
|
||||||
return (
|
return (
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
|
|
@ -14,7 +14,10 @@ export const TooltipBetter: FC<any> = ({ content, children }) => {
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<div className="w-full flex flex-grow flex-row">{children}</div>
|
<div className="w-full flex flex-grow flex-row">{children}</div>
|
||||||
</TooltipTrigger>
|
</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>
|
<p>{content}</p>
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue