@vtaits/react-form-schema-ui-vkui-v5
Version:
VKUI fields for @vtaits/form-schema
559 lines (557 loc) • 13.2 kB
JavaScript
// src/VKUIProvider.tsx
import { BaseUIContext } from "@vtaits/react-form-schema-base-ui";
// src/contextValue.tsx
import {
Icon12Add,
Icon16Attach,
Icon16Delete,
Icon16DocumentOutline
} from "@vkontakte/icons";
import {
Button,
CardGrid,
Checkbox,
unstable_ChipsSelect as ChipsSelect,
ContentCard,
DateInput,
File,
Footnote,
FormItem,
FormStatus,
IconButton,
Input,
Radio,
Select,
Textarea,
Title
} from "@vkontakte/vkui";
import {
ChipsAsyncPaginate,
CustomAsyncPaginate
} from "select-async-paginate-vkui-v5";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var contextValue = {
renderAsyncSelect: ({
clearable,
disabled,
autoFocus,
additional,
initialAdditional,
optionsCacheRef,
loadOptions,
placeholder,
value,
onChange,
getOptionValue
}) => /* @__PURE__ */ jsx(
CustomAsyncPaginate,
{
allowClearButton: clearable,
autoFocus,
disabled,
onChange: (event) => {
const nextValue = event.target.value;
const selectedOption = typeof nextValue === "string" || typeof nextValue === "number" ? optionsCacheRef.current[nextValue] : null;
onChange(selectedOption);
},
placeholder,
value: value ? getOptionValue(value) : "",
additional,
initialAdditional,
loadOptions,
searchable: true
}
),
renderAsyncMultiSelect: ({
disabled,
autoFocus,
additional,
initialAdditional,
loadOptions,
value,
onChange,
getOptionLabel,
getOptionValue
}) => /* @__PURE__ */ jsx(
ChipsAsyncPaginate,
{
autoFocus,
disabled,
onChange,
value: value ? value.map((option) => ({
label: getOptionLabel(option),
value: getOptionValue(option)
})) : [],
additional,
initialAdditional,
loadOptions
}
),
renderCheckbox: ({
checked,
disabled,
autoFocus,
name,
onChange,
children
}) => /* @__PURE__ */ jsx(
Checkbox,
{
autoFocus,
disabled,
name,
checked,
onChange: (event) => {
onChange(event.target.checked);
},
children
}
),
renderCheckboxGroup: ({
disabled,
name,
value,
onChange,
options,
getOptionLabel,
getOptionValue
}) => {
const selectedValuesSet = new Set(
(value || []).map((option) => getOptionValue(option))
);
return /* @__PURE__ */ jsx("div", { children: options.map((option) => {
const optionValue = getOptionValue(option);
const checked = selectedValuesSet.has(optionValue);
return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
Checkbox,
{
checked,
disabled,
name,
onChange: () => {
if (checked) {
onChange(
value.filter(
(valueItem) => getOptionValue(valueItem) !== optionValue
)
);
} else {
onChange([...value, option]);
}
},
children: getOptionLabel(option)
}
) }, optionValue);
}) });
},
renderDatePicker: ({ disabled, autoFocus, name, onChange, value }) => /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: /* @__PURE__ */ jsx(
DateInput,
{
autoFocus,
disabled,
name,
value: value || void 0,
onChange
}
) }),
renderDateTimePicker: ({ disabled, autoFocus, name, onChange, value }) => /* @__PURE__ */ jsx("div", { style: { display: "flex" }, children: /* @__PURE__ */ jsx(
DateInput,
{
autoFocus,
disabled,
name,
enableTime: true,
value: value || void 0,
onChange
}
) }),
renderFileInput: ({
accept,
children,
disabled,
name,
onSelectFile,
selectedFile
}) => /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
File,
{
accept,
before: /* @__PURE__ */ jsx(Icon16DocumentOutline, { role: "presentation" }),
disabled,
name,
mode: "secondary",
onChange: (event) => {
onSelectFile(event.target.files?.[0] || null);
event.target.value = "";
},
children
}
),
selectedFile && /* @__PURE__ */ jsxs(
"p",
{
style: {
display: "flex",
alignItems: "center",
gap: "10px"
},
children: [
/* @__PURE__ */ jsx(Icon16Attach, {}),
selectedFile,
/* @__PURE__ */ jsx(
IconButton,
{
disabled,
label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C",
onClick: () => {
onSelectFile(null);
},
children: /* @__PURE__ */ jsx(Icon16Delete, {})
}
)
]
}
)
] }),
renderForm: ({ actions, error, fields, formProps, title }) => /* @__PURE__ */ jsxs("form", { ...formProps, children: [
title && /* @__PURE__ */ jsx(
Title,
{
level: "3",
style: {
marginBottom: "30px"
},
children: title
}
),
fields,
error && /* @__PURE__ */ jsx(
"div",
{
style: {
marginTop: "20px",
marginBottom: "20px"
},
children: /* @__PURE__ */ jsx(FormStatus, { mode: "error", "data-testid": "@@form/error", children: error })
}
),
/* @__PURE__ */ jsx(FormItem, { children: actions })
] }),
renderInput: ({
disabled,
inputProps: { ref, size, ...inputProps } = {},
autoFocus,
onChange,
options,
name
}) => {
const wrappedOnChange = (event) => {
onChange(event.target.value);
};
if (options && options.length > 0) {
const listId = `${name}-datalist`;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Input,
{
autoFocus,
disabled,
list: `${name}-datalist`,
name,
...inputProps,
onChange: wrappedOnChange
}
),
/* @__PURE__ */ jsx("datalist", { id: listId, children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option }, option)) })
] });
}
return /* @__PURE__ */ jsx(
Input,
{
autoFocus,
disabled,
name,
...inputProps,
onChange: wrappedOnChange
}
);
},
renderListAddButton: ({ children, disabled, onClick }) => /* @__PURE__ */ jsx(
Button,
{
before: /* @__PURE__ */ jsx(Icon12Add, {}),
disabled,
mode: "link",
onClick,
"data-testid": "@@list/add",
children
}
),
renderListItemWrapper: ({
children,
disabled,
handleRemove,
title,
name
}) => /* @__PURE__ */ jsx(CardGrid, { size: "l", "data-testid": `@@list-item/${name}`, children: /* @__PURE__ */ jsx(
ContentCard,
{
header: /* @__PURE__ */ jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ jsx("div", { children: title }),
handleRemove && /* @__PURE__ */ jsx(
IconButton,
{
disabled,
label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C",
onClick: handleRemove,
children: /* @__PURE__ */ jsx(Icon16Delete, {})
}
)
]
}
),
text: children
}
) }),
renderListWrapper: ({
actions,
error,
hint,
items,
label,
name,
required
}) => {
return /* @__PURE__ */ jsx(
FormItem,
{
top: required ? /* @__PURE__ */ jsxs(Fragment, { children: [
label,
/* @__PURE__ */ jsx(
"span",
{
style: {
color: "#e64646"
},
children: " *"
}
)
] }) : label,
bottom: /* @__PURE__ */ jsxs(Fragment, { children: [
hint && /* @__PURE__ */ jsx(
"p",
{
style: {
color: "gray"
},
children: hint
}
),
actions && /* @__PURE__ */ jsx(
"div",
{
style: {
marginTop: "8px"
},
children: actions
}
),
error && /* @__PURE__ */ jsx(
"p",
{
style: {
color: "red"
},
role: "alert",
children: error
}
)
] }),
"data-testid": `@@list/${name}`,
required,
children: /* @__PURE__ */ jsx("div", { role: "list", children: items })
}
);
},
renderMultiSelect: ({
disabled,
autoFocus,
options,
optionsCacheRef,
value,
onChange,
getOptionLabel,
getOptionValue
}) => /* @__PURE__ */ jsx(
ChipsSelect,
{
autoFocus,
disabled,
onChange: (nextSelectValue) => {
const nextValue = [];
for (const selectedChip of nextSelectValue) {
const selectedOption = optionsCacheRef.current[selectedChip.value];
if (selectedOption) {
nextValue.push(selectedOption);
}
}
onChange(nextValue);
},
value: value ? value.map((option) => ({
label: getOptionLabel(option),
value: getOptionValue(option)
})) : [],
options: options.map((option) => ({
label: getOptionLabel(option),
value: getOptionValue(option)
}))
}
),
renderRadioGroup: ({
disabled,
name,
value,
onChange,
options,
getOptionLabel,
getOptionValue
}) => {
const selectedValue = value ? getOptionValue(value) : null;
return /* @__PURE__ */ jsx("div", { children: options.map((option) => {
const optionValue = getOptionValue(option);
return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
Radio,
{
checked: optionValue === selectedValue,
disabled,
name,
onChange: () => {
onChange(option);
},
children: getOptionLabel(option)
}
) }, optionValue);
}) });
},
renderSelect: ({
clearable,
disabled,
autoFocus,
options,
optionsCacheRef,
placeholder,
value,
onChange,
getOptionLabel,
getOptionValue
}) => /* @__PURE__ */ jsx(
Select,
{
allowClearButton: clearable,
autoFocus,
disabled,
onChange: (event) => {
const nextValue = event.target.value;
const selectedOption = optionsCacheRef.current[nextValue];
onChange(selectedOption);
},
placeholder,
value: value ? getOptionValue(value) : "",
options: options.map((option) => ({
label: getOptionLabel(option),
value: getOptionValue(option)
})),
searchable: true
}
),
renderTags: ({ disabled, autoFocus, name, onChange, options, value }) => /* @__PURE__ */ jsx(
ChipsSelect,
{
autoFocus,
creatable: true,
disabled,
name,
onChange: (nextOptions) => {
onChange(nextOptions.map(({ value: option }) => option));
},
options: options ? options.map((option) => ({
value: option,
label: option
})) : [],
value: (value || []).map((option) => ({
value: option,
label: option
}))
}
),
renderTextArea: ({
disabled,
autoFocus,
textAreaProps: { ref, size, defaultValue, ...textAreaProps } = {},
name
}) => /* @__PURE__ */ jsx(
Textarea,
{
autoFocus,
disabled,
name,
...textAreaProps,
defaultValue
}
),
renderWrapper: ({ children, error, hint, label, required }) => {
return /* @__PURE__ */ jsxs(
FormItem,
{
top: required ? /* @__PURE__ */ jsxs(Fragment, { children: [
label,
/* @__PURE__ */ jsx(
"span",
{
style: {
color: "#e64646"
},
children: " *"
}
)
] }) : label,
bottom: error,
status: error ? "error" : void 0,
required,
children: [
children,
hint && /* @__PURE__ */ jsx(
Footnote,
{
style: {
color: "gray",
paddingTop: 6
},
children: hint
}
)
]
}
);
}
};
// src/VKUIProvider.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
function VKUIProvider({
children = void 0
}) {
return /* @__PURE__ */ jsx2(BaseUIContext.Provider, { value: contextValue, children });
}
export {
VKUIProvider
};
//# sourceMappingURL=index.js.map