some updates for the carbon form theme w/ burnettk cullerton

This commit is contained in:
jasquat 2022-11-16 16:09:48 -05:00
parent f7aa497aa6
commit 498292d354
7 changed files with 28 additions and 25 deletions

View File

@ -3,11 +3,6 @@ import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { import {
Button, Button,
Table, Table,
// ExpandableTile,
// TileAboveTheFoldContent,
// TileBelowTheFoldContent,
// TextInput,
// ClickableTile,
// @ts-ignore // @ts-ignore
} from '@carbon/react'; } from '@carbon/react';
import { Can } from '@casl/react'; import { Can } from '@casl/react';

View File

@ -52,12 +52,16 @@ function BaseInputTemplate({
const { schemaUtils } = registry; const { schemaUtils } = registry;
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema); const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
let labelToUse = label; let labelToUse = label;
if (uiSchema && uiSchema['ui:title']) { if (uiSchema && uiSchema['ui:title']) {
labelToUse = uiSchema['ui:title']; labelToUse = uiSchema['ui:title'];
} else if (schema && schema.title) { } else if (schema && schema.title) {
labelToUse = schema.title; labelToUse = schema.title;
} }
if (required) {
labelToUse = `${labelToUse}*`;
}
return ( return (
<> <>
@ -67,7 +71,6 @@ function BaseInputTemplate({
placeholder={placeholder} placeholder={placeholder}
labelText={displayLabel ? labelToUse : false} labelText={displayLabel ? labelToUse : false}
autoFocus={autofocus} autoFocus={autofocus}
required={required}
disabled={disabled || readonly} disabled={disabled || readonly}
value={value || value === 0 ? value : ''} value={value || value === 0 ? value : ''}
error={rawErrors.length > 0} error={rawErrors.length > 0}

View File

@ -3,6 +3,6 @@ import { withTheme, FormProps } from '@rjsf/core';
import Theme from '../Theme'; import Theme from '../Theme';
const MuiForm: ComponentType<FormProps> = withTheme(Theme); const CarbonForm: ComponentType<FormProps> = withTheme(Theme);
export default MuiForm; export default CarbonForm;

View File

@ -0,0 +1,2 @@
export { default } from './CarbonForm';
export * from './CarbonForm';

View File

@ -1,2 +0,0 @@
export { default } from './MuiForm';
export * from './MuiForm';

View File

@ -1,6 +1,5 @@
import React from 'react'; // @ts-ignore
import MenuItem from '@mui/material/MenuItem'; import { Select, SelectItem } from '@carbon/react';
import TextField from '@mui/material/TextField';
import { WidgetProps, processSelectValue } from '@rjsf/utils'; import { WidgetProps, processSelectValue } from '@rjsf/utils';
function SelectWidget({ function SelectWidget({
@ -17,6 +16,7 @@ function SelectWidget({
onChange, onChange,
onBlur, onBlur,
onFocus, onFocus,
uiSchema,
rawErrors = [], rawErrors = [],
}: WidgetProps) { }: WidgetProps) {
const { enumOptions, enumDisabled } = options; const { enumOptions, enumDisabled } = options;
@ -34,14 +34,23 @@ function SelectWidget({
}: React.FocusEvent<HTMLInputElement>) => }: React.FocusEvent<HTMLInputElement>) =>
onFocus(id, processSelectValue(schema, value, options)); onFocus(id, processSelectValue(schema, value, options));
let labelToUse = label;
if (uiSchema && uiSchema['ui:title']) {
labelToUse = uiSchema['ui:title'];
} else if (schema && schema.title) {
labelToUse = schema.title;
}
if (required) {
labelToUse = `${labelToUse}*`;
}
return ( return (
<TextField <Select
id={id} id={id}
name={id} name={id}
label={label || schema.title} labelText={labelToUse}
select select
value={typeof value === 'undefined' ? emptyValue : value} value={typeof value === 'undefined' ? emptyValue : value}
required={required}
disabled={disabled || readonly} disabled={disabled || readonly}
autoFocus={autofocus} autoFocus={autofocus}
error={rawErrors.length > 0} error={rawErrors.length > 0}
@ -58,13 +67,9 @@ function SelectWidget({
{(enumOptions as any).map(({ value, label }: any, i: number) => { {(enumOptions as any).map(({ value, label }: any, i: number) => {
const disabled: any = const disabled: any =
enumDisabled && (enumDisabled as any).indexOf(value) != -1; enumDisabled && (enumDisabled as any).indexOf(value) != -1;
return ( return <SelectItem text={label} value={value} disabled={disabled} />;
<MenuItem key={i} value={value} disabled={disabled}>
{label}
</MenuItem>
);
})} })}
</TextField> </Select>
); );
} }

View File

@ -1,9 +1,9 @@
import MuiForm from './MuiForm/MuiForm'; import CarbonForm from './CarbonForm/CarbonForm';
import './index.css'; import './index.css';
export { default as Form } from './MuiForm'; export { default as Form } from './CarbonForm';
export { default as Templates } from './Templates'; export { default as Templates } from './Templates';
export { default as Theme } from './Theme'; export { default as Theme } from './Theme';
export { default as Widgets } from './Widgets'; export { default as Widgets } from './Widgets';
export default MuiForm; export default CarbonForm;