Value Renderers

import { DynamicValue } from '@docyrus/ui/components/value-renderers';
import type { IField, DocyrusValueProps } from '@docyrus/ui/components/value-renderers';

const fields: IField[] = [
  { id: '1', name: 'Full Name', slug: 'full_name', type: 'field-text' },
  { id: '2', name: 'Priority', slug: 'priority', type: 'field-select' },
  { id: '3', name: 'Status', slug: 'status', type: 'field-status' },
];

const record = {
  full_name: 'Erhan ERDOGAN',
  priority: 'high',
  status: 'in_progress',
  __status_description: 'Working on API',
};

const enumOptions = [
  { id: 'low', name: 'Low', color: '#22c55e' },
  { id: 'medium', name: 'Medium', color: '#f59e0b' },
  { id: 'high', name: 'High', color: '#ef4444' },
];

function RecordDetail() {
  return (
    <div>
      {fields.map((field) => (
        <DynamicValue
          key={field.id}
          field={field}
          value={record[field.slug]}
          record={record}
          enumOptions={field.type === 'field-select' ? enumOptions : undefined}
        />
      ))}
    </div>
  );
}

import { TextValue } from '@docyrus/ui/components/value-renderers/text-value';
import { SelectValue } from '@docyrus/ui/components/value-renderers/select-value';
import { StatusValue } from '@docyrus/ui/components/value-renderers/status-value';

<DynamicValue
  field={fieldConfig}
  value={record[fieldConfig.slug]}
  record={record}
  enumOptions={options}
  className="my-value"
/>