adilallo
128 lines
3.9 KiB
TypeScript
128 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import Icon from "../../asset/icon";
|
|
import Vertical from "../../buttons/Vertical";
|
|
import {
|
|
ADD_CUSTOM_FIELD_TYPE_ICONS,
|
|
type AddCustomFieldType,
|
|
type AddCustomFieldViewProps,
|
|
} from "./AddCustomField.types";
|
|
|
|
function FieldTypeButton({
|
|
type,
|
|
label,
|
|
onSelect,
|
|
}: {
|
|
type: AddCustomFieldType;
|
|
label: string;
|
|
onSelect?: (t: AddCustomFieldType) => void;
|
|
}) {
|
|
return (
|
|
<Vertical
|
|
type="button"
|
|
ariaLabel={label}
|
|
onClick={() => onSelect?.(type)}
|
|
>
|
|
<span className="flex h-8 w-8 shrink-0 items-center justify-center">
|
|
<Icon
|
|
name={ADD_CUSTOM_FIELD_TYPE_ICONS[type]}
|
|
size={32}
|
|
className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
|
|
/>
|
|
</span>
|
|
<span className="w-full text-center font-inter text-[14px] font-medium leading-[18px] text-[var(--color-content-default-brand-primary,#fefcc9)]">
|
|
{label}
|
|
</span>
|
|
</Vertical>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Stable block height for collapsed vs expanded so the Create dialog (`top-1/2 -translate-y-1/2`)
|
|
* does not shrink and re-center when toggling `active`.
|
|
*
|
|
* - Collapsed CTA: `py-12` (48+48) + inner row (`py-3` + 20px icon/line) ≈ 140px border-box.
|
|
* - Expanded: inner `p-4` (32) + Vertical tile (py 12+12, gap 8, 32px icon, 18px label) ≈ 114px — shorter without this floor.
|
|
*/
|
|
const ADD_CUSTOM_FIELD_SHELL_MIN_H_PX = 140;
|
|
|
|
function AddCustomFieldViewComponent({
|
|
active,
|
|
onPressAdd,
|
|
onSelectFieldType,
|
|
ctaLabel,
|
|
fieldTypeLabels,
|
|
className,
|
|
}: AddCustomFieldViewProps) {
|
|
const shellStyle = {
|
|
minHeight: ADD_CUSTOM_FIELD_SHELL_MIN_H_PX,
|
|
} as const;
|
|
|
|
if (!active) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onPressAdd}
|
|
style={shellStyle}
|
|
className={`flex w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 py-12 font-inter text-[16px] font-medium leading-5 text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()}
|
|
>
|
|
<span className="flex items-center gap-[var(--spacing-scale-006)] rounded-full px-4 py-3">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden
|
|
>
|
|
<path
|
|
d="M12 5v14M5 12h14"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
{ctaLabel}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const expandedShellClasses = ["flex w-full shrink-0 flex-col", className ?? ""]
|
|
.join(" ")
|
|
.trim();
|
|
|
|
return (
|
|
<div className={expandedShellClasses} style={shellStyle}>
|
|
<div className="flex w-full flex-col gap-3 rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] p-4">
|
|
<div className="flex w-full flex-row flex-nowrap justify-center gap-3 overflow-x-auto max-sm:justify-start">
|
|
<FieldTypeButton
|
|
type="text"
|
|
label={fieldTypeLabels.text}
|
|
onSelect={onSelectFieldType}
|
|
/>
|
|
<FieldTypeButton
|
|
type="badges"
|
|
label={fieldTypeLabels.badges}
|
|
onSelect={onSelectFieldType}
|
|
/>
|
|
<FieldTypeButton
|
|
type="upload"
|
|
label={fieldTypeLabels.upload}
|
|
onSelect={onSelectFieldType}
|
|
/>
|
|
<FieldTypeButton
|
|
type="proportion"
|
|
label={fieldTypeLabels.proportion}
|
|
onSelect={onSelectFieldType}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const AddCustomFieldView = memo(AddCustomFieldViewComponent);
|
|
AddCustomFieldView.displayName = "AddCustomFieldView";
|