50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo, useCallback, useMemo } from "react";
|
|
import { useMessages } from "../../../contexts/MessagesContext";
|
|
import { AddCustomFieldView } from "./AddCustomField.view";
|
|
import type { AddCustomFieldProps, AddCustomFieldType } from "./AddCustomField.types";
|
|
|
|
/**
|
|
* Figma: "Add Custom Field" control — Community Rule System (`20235:12994`).
|
|
* Collapsed CTA expands to a four-tile field-type picker.
|
|
*/
|
|
const AddCustomFieldContainer = memo<AddCustomFieldProps>(
|
|
({ active, onPressAdd, onSelectFieldType, className = "" }) => {
|
|
const m = useMessages();
|
|
const copy = m.create.customRule.customMethodCardWizard.addCustomField;
|
|
|
|
const fieldTypeLabels = useMemo(
|
|
() => ({
|
|
text: copy.fieldTypes.text,
|
|
badges: copy.fieldTypes.badges,
|
|
upload: copy.fieldTypes.upload,
|
|
proportion: copy.fieldTypes.proportion,
|
|
}),
|
|
[copy.fieldTypes],
|
|
);
|
|
|
|
const handleSelect = useCallback(
|
|
(t: AddCustomFieldType) => {
|
|
onSelectFieldType?.(t);
|
|
},
|
|
[onSelectFieldType],
|
|
);
|
|
|
|
return (
|
|
<AddCustomFieldView
|
|
active={active}
|
|
onPressAdd={onPressAdd}
|
|
onSelectFieldType={handleSelect}
|
|
ctaLabel={copy.cta}
|
|
fieldTypeLabels={fieldTypeLabels}
|
|
className={className}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
AddCustomFieldContainer.displayName = "AddCustomField";
|
|
|
|
export default AddCustomFieldContainer;
|