some updates for the carbon form theme w/ burnettk cullerton
This commit is contained in:
parent
f7aa497aa6
commit
498292d354
|
@ -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';
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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;
|
|
@ -0,0 +1,2 @@
|
||||||
|
export { default } from './CarbonForm';
|
||||||
|
export * from './CarbonForm';
|
|
@ -1,2 +0,0 @@
|
||||||
export { default } from './MuiForm';
|
|
||||||
export * from './MuiForm';
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue