ar-design
Version:
AR Design is a (react | nextjs) ui library.
69 lines (68 loc) • 4.56 kB
JavaScript
"use client";
import React, { useEffect, useState } from "react";
import Input from "../../../form/input";
import DatePicker from "../../../form/date-picker";
import Select from "../../../form/select";
import { ExtractKey } from "../Helpers";
import Checkbox from "../../../form/checkbox";
const Editable = function ({ c, item, trackByValue, onEditable, config }) {
// variables
const key = c.key;
const itemValue = item[c.key];
const selectItem = c.editable?.(item)?.options?.find((x) => x.value === itemValue);
const selectItems = Array.isArray(itemValue)
? c.editable?.(item)?.options?.filter((x) => itemValue.includes(x.value))
: [];
const validation = config.validation;
const _vText = validation?.errors?.[`${c.key}_${trackByValue}`];
// states
const [_value, setValue] = useState(itemValue);
// useEffects
useEffect(() => setValue(itemValue), [item]);
switch (c.editable?.(item)?.type) {
case "string":
case "number":
return (React.createElement(Input, { variant: "borderless", value: String(_value ?? ""), onChange: (event) => {
const { value } = event.target;
setValue(value);
onEditable({ ...item, [key]: c.editable?.(item)?.type === "number" ? Number(value) : value }, trackByValue, ExtractKey(c.key));
}, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
case "boolean":
return (React.createElement(Checkbox, { variant: "borderless", color: "blue", checked: Boolean(_value), onChange: (event) => {
const checked = event.target.checked;
setValue(checked);
onEditable({
...item,
[key]: checked,
}, trackByValue, ExtractKey(c.key));
}, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
case "decimal":
return (React.createElement(Input.Decimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => {
const { value } = event.target;
setValue(value);
onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
}, validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
case "input-formatted-decimal":
return (React.createElement(Input.FormattedDecimal, { variant: "borderless", name: c.key, value: String(_value ?? ""), onChange: (event) => {
const { value } = event.target;
setValue(value);
onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
}, validation: { text: _vText }, locale: config.locale, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
case "date-picker":
return (React.createElement(DatePicker, { variant: "borderless", value: String(_value ?? ""), onChange: (value) => {
setValue(value);
onEditable({ ...item, [key]: value }, trackByValue, ExtractKey(c.key));
}, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
case "single-select":
return (React.createElement(Select, { variant: "borderless", value: selectItem, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (option) => {
onEditable({ ...item, [key]: option?.value }, trackByValue, ExtractKey(c.key));
}, validation: { text: _vText }, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
case "multiple-select":
return (React.createElement(Select, { variant: "borderless", value: selectItems, options: c.editable?.(item).options, onClick: async () => await c.editable?.(item)?.method?.(), onChange: (options) => {
onEditable({ ...item, [key]: options.map((option) => option.value) }, trackByValue, ExtractKey(c.key));
}, validation: { text: _vText }, multiple: true, ...(c.editable?.(item).where ? { disabled: c.editable?.(item).where } : {}) }));
default:
return null;
}
};
export default Editable;