Fix/semantic custom fields

docs/api-reference/themes/semantic-ui/uiSchema.md

@@ -106,11 +106,10 @@ wrapLabel: wrap all labels in a div, for custom styling via CSS
 ```jsx
 <Form
   formContext={{
-    "semantic"={
+    "semantic" : {
       "wrapLabel": true,
       "wrapContent": true
     }
-    uiSchema={uiSchema}
   // other props...
   }}
 />

packages/semantic-ui/package.json

@@ -31,8 +31,8 @@
     "@rjsf/core": "^2.0.0",
     "lodash": "^4.17.15",
     "react": ">=16",
-    "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.87.3",
+    "semantic-ui-css": "2.4.1",
+    "semantic-ui-react": "1.2.1",
     "shortid": "^2.2.14"
   },
   "devDependencies": {

packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.js

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types,react/destructuring-assignment */
 import React from "react";
-import PropTypes from "prop-types";
 import { Button, Grid, Segment } from "semantic-ui-react";
 import { utils } from '@rjsf/core';
 import AddButton from "../AddButton";
@@ -231,8 +230,17 @@ function DefaultNormalArrayFieldTemplate({
 }
 
 function ArrayFieldTemplate(props) {
-  const { schema } = props;
-  const { horizontalButtons, wrapItem } = getSemanticProps(props);
+  const { options,
+    schema,
+    uiSchema,
+    formContext, } = props;
+  const semanticProps = getSemanticProps({
+      options,
+      uiSchema,
+      formContext,
+      defaultSchemaProps: { horizontalButtons : false, wrapItem : false }
+  });
+  const  { horizontalButtons, wrapItem } = semanticProps;
   const itemProps = { horizontalButtons, wrapItem };
 
   if (isFixedItems(schema)) {
@@ -241,12 +249,4 @@ function ArrayFieldTemplate(props) {
   return <DefaultNormalArrayFieldTemplate {...props} itemProps={itemProps} />;
 }
 
-ArrayFieldTemplate.defaultProps = {
-  options: {},
-};
-
-ArrayFieldTemplate.propTypes = {
-  options: PropTypes.object,
-};
-
 export default ArrayFieldTemplate;

packages/semantic-ui/src/CheckboxWidget/CheckboxWidget.js

@@ -6,19 +6,27 @@ import { getSemanticProps } from "../util";
 function CheckboxWidget(props) {
   const {
     id,
+    label,
     value,
     required,
-    disabled,
     readonly,
-    label,
-    autofocus,
+    disabled,
     onChange,
     onBlur,
-    options,
     onFocus,
+    autofocus,
+    options,
+    schema,
+    uiSchema,
     formContext,
   } = props;
-  const semanticProps = getSemanticProps({ formContext, options });
+  const semanticProps = getSemanticProps({
+    options,
+    formContext,
+    schema,
+    uiSchema,
+    defaultSchemaProps: {},
+   });
   const _onChange = (event, data) => onChange && onChange(data.checked);
   const _onBlur = () => onBlur && onBlur(id, value);
   const _onFocus = () => onFocus && onFocus(id, value);
@@ -34,17 +42,9 @@ function CheckboxWidget(props) {
       onBlur={_onBlur}
       onFocus={_onFocus}
       required={required}
-      label={label}
+      label={label || schema.title}
     />
   );
 }
 
-CheckboxWidget.defaultProps = {
-  options: {
-    semantic: {
-      inverted: false,
-    },
-  },
-};
-
 export default CheckboxWidget;

packages/semantic-ui/src/CheckboxesWidget/CheckboxesWidget.js

@@ -16,22 +16,30 @@ function deselectValue(value, selected) {
   return selected.filter(v => v !== value);
 }
 
-function CheckboxesWidget({
-  id,
-  disabled,
-  options,
-  value,
-  autofocus,
-  readonly,
-  onChange,
-  onBlur,
-  onFocus,
-  formContext,
-  schema,
-}) {
+function CheckboxesWidget(props) {
+  const {
+    id,
+    value,
+    readonly,
+    disabled,
+    onChange,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    uiSchema,
+    formContext,
+  } = props;
   const { enumOptions, enumDisabled, inline } = options;
   const { title } = schema;
-  const semanticProps = getSemanticProps({ formContext, options });
+  const semanticProps = getSemanticProps({
+    options,
+    formContext,
+    schema,
+    uiSchema,
+    defaultSchemaProps: {},
+   });
   const _onChange = option => ({ target: { checked } }) => {
     // eslint-disable-next-line no-shadow
     const all = enumOptions.map(({ value }) => value);
@@ -73,12 +81,4 @@ function CheckboxesWidget({
   );
 }
 
-CheckboxesWidget.defaultProps = {
-  options: {
-    semantic: {
-      inverted: false,
-    },
-  },
-};
-
 export default CheckboxesWidget;