sf-required class for required inputs

Author: jamesej

build/components/component-for-type.d.ts

@@ -2,6 +2,6 @@ import React from "react";
 import { ISchemaContainerProps } from "components/schema-form-interfaces";
 declare function ComponentForTypeInner(props: ISchemaContainerProps): React.ReactElement;
 export declare const ComponentForType: React.MemoExoticComponent<typeof ComponentForTypeInner>;
-declare function SchemaFormComponentGenericInner({ schema, path, value, errors, onFocus, onBlur, onEditor, context }: ISchemaContainerProps): React.ReactElement;
+declare function SchemaFormComponentGenericInner({ schema, path, value, isRequired, errors, onFocus, onBlur, onEditor, context }: ISchemaContainerProps): React.ReactElement;
 export declare const SchemaFormComponentGeneric: React.MemoExoticComponent<typeof SchemaFormComponentGenericInner>;
 export {};

build/components/schema-form-interfaces.d.ts

@@ -5,6 +5,7 @@ export interface ISchemaContainerProps {
     schema: object;
     path: string[];
     value: object;
+    isRequired?: boolean;
     errors: ErrorObject | Ajv.ErrorObject[];
     onFocus(path: string[]): void;
     onBlur(path: string[]): void;
@@ -15,6 +16,7 @@ export interface ISchemaComponentProps {
     schema: object;
     path: string[];
     value: any;
+    isRequired?: boolean;
     errors: Ajv.ErrorObject[];
     onFocus(path: string[]): void;
     onBlur(path: string[]): void;

build/index.es.js

@@ -24979,12 +24979,13 @@ function valueReducer(oldValue, action) {
 }
 
 var SchemaFormComponentWrapper = function (_a) {
-    var errors = _a.errors, caption = _a.caption, children = _a.children, schema = _a.schema;
+    var errors = _a.errors, caption = _a.caption, children = _a.children, schema = _a.schema, isRequired = _a.isRequired;
     var isError = errors.length > 0;
-    var errorClass = isError ? "sf-has-error" : "";
+    var errorClass = isError ? "sf-has-error " : "";
+    var requiredClass = isRequired ? "sf-required" : "";
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "sf-row" },
-            caption && React.createElement("label", { htmlFor: name, className: "sf-caption " + errorClass },
+            caption && React.createElement("label", { htmlFor: name, className: "sf-caption " + errorClass + requiredClass },
                 caption,
                 schema['description'] && (React.createElement(React.Fragment, null,
                     React.createElement("br", null),
@@ -25001,7 +25002,7 @@ var stringFilters = {
     }
 };
 function SchemaFormComponent(props) {
-    var schema = props.schema, path = props.path, value = props.value, errors = props.errors, onFocus = props.onFocus, onBlur = props.onBlur, context = props.context;
+    var schema = props.schema, path = props.path, value = props.value, errors = props.errors, onFocus = props.onFocus, onBlur = props.onBlur, context = props.context, isRequired = props.isRequired;
     var name = path.join('.');
     var dispatch = useContext(ValueDispatch);
     var _a = useState(''), holdString = _a[0], setHoldString = _a[1];
@@ -25133,15 +25134,16 @@ function isEqual(p0, p1) {
     var equ = lodash.isEqual(p0.value, p1.value)
         && lodash.isEqual(p0.errors, p1.errors)
         && p0.schema === p1.schema
+        && (p0.isRequired || false) === (p1.isRequired || false)
         && p0.onBlur === p1.onBlur
         && p0.onFocus === p1.onFocus
         && p0.onEditor === p1.onEditor;
     return equ;
 }
 function SchemaFormComponentGenericInner(_a) {
-    var schema = _a.schema, path = _a.path, value = _a.value, errors = _a.errors, onFocus = _a.onFocus, onBlur = _a.onBlur, onEditor = _a.onEditor, context = _a.context;
+    var schema = _a.schema, path = _a.path, value = _a.value, isRequired = _a.isRequired, errors = _a.errors, onFocus = _a.onFocus, onBlur = _a.onBlur, onEditor = _a.onEditor, context = _a.context;
     var componentProps = {
-        schema: schema, path: path, value: value, onFocus: onFocus, onBlur: onBlur, onEditor: onEditor,
+        schema: schema, path: path, value: value, isRequired: isRequired, onFocus: onFocus, onBlur: onBlur, onEditor: onEditor,
         errors: (errors || []),
         caption: fieldCaption(schema, path),
         context: context.componentContext
@@ -25203,23 +25205,24 @@ function SchemaFormObject(_a) {
     var _b = useState(false), collapsed = _b[0], setCollapsed = _b[1];
     var pathEl = path.length ? lodash.last(path) : '';
     var objectClass = path.length === 0 ? "" : "sf-object sf-" + pathEl;
-    function renderSection(order, properties, i) {
+    function renderSection(order, properties, requireds, i) {
         if (typeof order === 'string') {
             var _a = properties.find(function (_a) {
                 var key = _a[0], _ = _a[1];
                 return key === order;
             }) || ['', null], key = _a[0], subSchema = _a[1];
             if (key) {
-                return (React.createElement(ComponentForType, { schema: subSchema, path: __spreadArrays(path, [key]), value: value && value[key], errors: ErrorObject.forKey(errors, key), onFocus: onFocus, onBlur: onBlur, onEditor: onEditor, key: key, context: context }));
+                return (React.createElement(ComponentForType, { schema: subSchema, path: __spreadArrays(path, [key]), value: value && value[key], isRequired: requireds && requireds.indexOf(key) >= 0, errors: ErrorObject.forKey(errors, key), onFocus: onFocus, onBlur: onBlur, onEditor: onEditor, key: key, context: context }));
             }
         }
         else { // recurse into a section list
-            return (React.createElement("section", { key: i || 0 }, order.map(function (subOrder, i) { return renderSection(subOrder, properties, i); })));
+            return (React.createElement("section", { key: i || 0 }, order.map(function (subOrder, i) { return renderSection(subOrder, properties, requireds, i); })));
         }
         return React.createElement(React.Fragment, null);
     }
     var topOrder = schema['order'] || Object.keys(schema['properties']);
     var properties = Object.entries(schema['properties']);
+    var requireds = schema['required'];
     if (schema['order'] && lodash.flatten(schema['order']).length < properties.length) {
         console.log('fewer items in order than properties at ' + path.join('.'));
     }
@@ -25231,7 +25234,7 @@ function SchemaFormObject(_a) {
         showTitle && React.createElement("div", { className: "sf-title" },
             collapsible && React.createElement("span", { className: collapserClasses, onClick: onCollapserClick }),
             fieldCaption(schema, path, value) || '\u00A0'),
-        !collapsed && React.createElement("div", { className: "sf-object-fieldset fieldset" }, topOrder.map(function (subOrder) { return renderSection(subOrder, properties); }))));
+        !collapsed && React.createElement("div", { className: "sf-object-fieldset fieldset" }, topOrder.map(function (subOrder) { return renderSection(subOrder, properties, requireds); }))));
 }
 
 var reactIs_production_min = createCommonjsModule(function (module, exports) {

build/index.es.js.map

@@ -24986,12 +24986,13 @@ function valueReducer(oldValue, action) {
 }
 
 var SchemaFormComponentWrapper = function (_a) {
-    var errors = _a.errors, caption = _a.caption, children = _a.children, schema = _a.schema;
+    var errors = _a.errors, caption = _a.caption, children = _a.children, schema = _a.schema, isRequired = _a.isRequired;
     var isError = errors.length > 0;
-    var errorClass = isError ? "sf-has-error" : "";
+    var errorClass = isError ? "sf-has-error " : "";
+    var requiredClass = isRequired ? "sf-required" : "";
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: "sf-row" },
-            caption && React__default.createElement("label", { htmlFor: name, className: "sf-caption " + errorClass },
+            caption && React__default.createElement("label", { htmlFor: name, className: "sf-caption " + errorClass + requiredClass },
                 caption,
                 schema['description'] && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("br", null),
@@ -25008,7 +25009,7 @@ var stringFilters = {
     }
 };
 function SchemaFormComponent(props) {
-    var schema = props.schema, path = props.path, value = props.value, errors = props.errors, onFocus = props.onFocus, onBlur = props.onBlur, context = props.context;
+    var schema = props.schema, path = props.path, value = props.value, errors = props.errors, onFocus = props.onFocus, onBlur = props.onBlur, context = props.context, isRequired = props.isRequired;
     var name = path.join('.');
     var dispatch = React.useContext(ValueDispatch);
     var _a = React.useState(''), holdString = _a[0], setHoldString = _a[1];
@@ -25140,15 +25141,16 @@ function isEqual(p0, p1) {
     var equ = lodash.isEqual(p0.value, p1.value)
         && lodash.isEqual(p0.errors, p1.errors)
         && p0.schema === p1.schema
+        && (p0.isRequired || false) === (p1.isRequired || false)
         && p0.onBlur === p1.onBlur
         && p0.onFocus === p1.onFocus
         && p0.onEditor === p1.onEditor;
     return equ;
 }
 function SchemaFormComponentGenericInner(_a) {
-    var schema = _a.schema, path = _a.path, value = _a.value, errors = _a.errors, onFocus = _a.onFocus, onBlur = _a.onBlur, onEditor = _a.onEditor, context = _a.context;
+    var schema = _a.schema, path = _a.path, value = _a.value, isRequired = _a.isRequired, errors = _a.errors, onFocus = _a.onFocus, onBlur = _a.onBlur, onEditor = _a.onEditor, context = _a.context;
     var componentProps = {
-        schema: schema, path: path, value: value, onFocus: onFocus, onBlur: onBlur, onEditor: onEditor,
+        schema: schema, path: path, value: value, isRequired: isRequired, onFocus: onFocus, onBlur: onBlur, onEditor: onEditor,
         errors: (errors || []),
         caption: fieldCaption(schema, path),
         context: context.componentContext
@@ -25210,23 +25212,24 @@ function SchemaFormObject(_a) {
     var _b = React.useState(false), collapsed = _b[0], setCollapsed = _b[1];
     var pathEl = path.length ? lodash.last(path) : '';
     var objectClass = path.length === 0 ? "" : "sf-object sf-" + pathEl;
-    function renderSection(order, properties, i) {
+    function renderSection(order, properties, requireds, i) {
         if (typeof order === 'string') {
             var _a = properties.find(function (_a) {
                 var key = _a[0], _ = _a[1];
                 return key === order;
             }) || ['', null], key = _a[0], subSchema = _a[1];
             if (key) {
-                return (React__default.createElement(ComponentForType, { schema: subSchema, path: __spreadArrays(path, [key]), value: value && value[key], errors: ErrorObject.forKey(errors, key), onFocus: onFocus, onBlur: onBlur, onEditor: onEditor, key: key, context: context }));
+                return (React__default.createElement(ComponentForType, { schema: subSchema, path: __spreadArrays(path, [key]), value: value && value[key], isRequired: requireds && requireds.indexOf(key) >= 0, errors: ErrorObject.forKey(errors, key), onFocus: onFocus, onBlur: onBlur, onEditor: onEditor, key: key, context: context }));
             }
         }
         else { // recurse into a section list
-            return (React__default.createElement("section", { key: i || 0 }, order.map(function (subOrder, i) { return renderSection(subOrder, properties, i); })));
+            return (React__default.createElement("section", { key: i || 0 }, order.map(function (subOrder, i) { return renderSection(subOrder, properties, requireds, i); })));
         }
         return React__default.createElement(React__default.Fragment, null);
     }
     var topOrder = schema['order'] || Object.keys(schema['properties']);
     var properties = Object.entries(schema['properties']);
+    var requireds = schema['required'];
     if (schema['order'] && lodash.flatten(schema['order']).length < properties.length) {
         console.log('fewer items in order than properties at ' + path.join('.'));
     }
@@ -25238,7 +25241,7 @@ function SchemaFormObject(_a) {
         showTitle && React__default.createElement("div", { className: "sf-title" },
             collapsible && React__default.createElement("span", { className: collapserClasses, onClick: onCollapserClick }),
             fieldCaption(schema, path, value) || '\u00A0'),
-        !collapsed && React__default.createElement("div", { className: "sf-object-fieldset fieldset" }, topOrder.map(function (subOrder) { return renderSection(subOrder, properties); }))));
+        !collapsed && React__default.createElement("div", { className: "sf-object-fieldset fieldset" }, topOrder.map(function (subOrder) { return renderSection(subOrder, properties, requireds); }))));
 }
 
 var reactIs_production_min = createCommonjsModule(function (module, exports) {

build/index.js

@@ -26,18 +26,19 @@ function isEqual(p0: ISchemaContainerProps, p1: ISchemaContainerProps) {
     const equ =  _.isEqual(p0.value, p1.value)
     && _.isEqual(p0.errors, p1.errors)
     && p0.schema === p1.schema
+    && (p0.isRequired || false) === (p1.isRequired || false)
     && p0.onBlur === p1.onBlur
     && p0.onFocus === p1.onFocus
     && p0.onEditor === p1.onEditor;
     return equ;
 }
 
 function SchemaFormComponentGenericInner({
-    schema, path, value, errors, onFocus, onBlur, onEditor, context
+    schema, path, value, isRequired, errors, onFocus, onBlur, onEditor, context
 }: ISchemaContainerProps): React.ReactElement {
 
     const componentProps: ISchemaComponentProps = {
-        schema, path, value, onFocus, onBlur, onEditor,
+        schema, path, value, isRequired, onFocus, onBlur, onEditor,
         errors: (errors || []) as Ajv.ErrorObject[],
         caption: fieldCaption(schema, path),
         context: context.componentContext

build/index.js.map

@@ -3,13 +3,14 @@ import { ISchemaComponentProps } from "components/schema-form-interfaces";
 import { fieldType } from "schema/schema";
 import { ValueDispatch, ValueAction } from "components/schema-form-value-context";
 
-export const SchemaFormComponentWrapper: FunctionComponent<ISchemaComponentProps> = ({ errors, caption, children, schema }) => {
+export const SchemaFormComponentWrapper: FunctionComponent<ISchemaComponentProps> = ({ errors, caption, children, schema, isRequired }) => {
     const isError = errors.length > 0;
-    const errorClass = isError ? "sf-has-error" : "";
+    const errorClass = isError ? "sf-has-error " : "";
+    const requiredClass = isRequired ? "sf-required" : ""
     return (
     <>
         <div className="sf-row">
-            {caption && <label htmlFor={name} className={"sf-caption " + errorClass}>
+            {caption && <label htmlFor={name} className={"sf-caption " + errorClass + requiredClass}>
                 {caption}
                 {schema['description'] && (<><br/><span className={"sf-description " + errorClass}>
                     {schema['description']}
@@ -47,7 +48,8 @@ export function SchemaFormComponent(props: ISchemaComponentProps): React.ReactEl
         errors,
         onFocus,
         onBlur,
-        context
+        context,
+        isRequired
     } = props;
     const name = path.join('.');
     const dispatch = useContext(ValueDispatch);

src/components/component-for-type.tsx

@@ -7,6 +7,7 @@ export interface ISchemaContainerProps {
     schema: object,
     path: string[],
     value: object,
+    isRequired?: boolean,
     errors: ErrorObject | Ajv.ErrorObject[],
     onFocus(path: string[]): void,
     onBlur(path: string[]): void,
@@ -26,6 +27,7 @@ export interface ISchemaComponentProps {
     schema: object,
     path: string[],
     value: any,
+    isRequired?: boolean,
     errors: Ajv.ErrorObject[]
     onFocus(path: string[]): void,
     onBlur(path: string[]): void,

src/components/schema-form-component.tsx

@@ -22,7 +22,7 @@ export function SchemaFormObject({
     const pathEl = path.length ? _.last(path) : '';
     const objectClass = path.length === 0 ? "" : "sf-object sf-" + pathEl;
 
-    function renderSection(order: NestedList, properties: [string, unknown][], i?: number) {
+    function renderSection(order: NestedList, properties: [string, unknown][], requireds?: string[], i?: number) {
         if (typeof order === 'string') {
             const [key, subSchema] = properties.find(([key, _]) => key === order) || ['', null];
             if (key) {
@@ -31,6 +31,7 @@ export function SchemaFormObject({
                         schema={subSchema as object}
                         path={[ ...path, key ]}
                         value={value && value[key]}
+                        isRequired={requireds && requireds.indexOf(key) >= 0}
                         errors={ErrorObject.forKey(errors, key)}
                         onFocus={onFocus}
                         onBlur={onBlur}
@@ -42,7 +43,7 @@ export function SchemaFormObject({
         } else { // recurse into a section list
             return (
                 <section key={i || 0}>
-                    {order.map((subOrder, i) => renderSection(subOrder, properties, i))}
+                    {order.map((subOrder, i) => renderSection(subOrder, properties, requireds, i))}
                 </section>
             )
         }
@@ -51,6 +52,7 @@ export function SchemaFormObject({
 
     let topOrder: NestedListArray = schema['order'] || Object.keys(schema['properties']);
     let properties = Object.entries(schema['properties']);
+    let requireds = schema['required'];
     if (schema['order'] && _.flatten(schema['order']).length < properties.length) {
         console.log('fewer items in order than properties at ' + path.join('.'));
     }
@@ -66,7 +68,7 @@ export function SchemaFormObject({
                 {fieldCaption(schema, path, value) || '\u00A0'}
             </div>}
             {!collapsed && <div className="sf-object-fieldset fieldset">
-                {topOrder.map((subOrder) => renderSection(subOrder, properties))}
+                {topOrder.map((subOrder) => renderSection(subOrder, properties, requireds))}
             </div>}
         </div>
     )