semantic-ui: add submit button, email, url, date widgets (#2224)

* feat: add button,email,date widgets feat: include widgets Revert test: updates tests * chore: tests updated Co-authored-by: Jacques <[email protected]>
rjsf-team · Aug 12, 2021 · de8d0ff · de8d0ff
1 parent 7c2d9f1
commit de8d0ff
Show file tree

Hide file tree

Showing 15 changed files with 410 additions and 117 deletions.
diff --git a/packages/semantic-ui/src/DateTimeWidget/DateTimeWidget.js b/packages/semantic-ui/src/DateTimeWidget/DateTimeWidget.js
@@ -0,0 +1,65 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { utils } from "@rjsf/core";
+import { getSemanticProps } from "../util";
+import { Form } from "semantic-ui-react";
+
+const { localToUTC, utcToLocal, getDisplayLabel } = utils;
+
+function DateTimeWidget(props) {
+  const {
+  id,
+  required,
+  readonly,
+  disabled,
+  name,
+  label,
+  schema,
+  uiSchema,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  autofocus,
+  options,
+  formContext,
+  } = props;
+  const semanticProps = getSemanticProps({ formContext, options });
+  const _onChange = ({ target: { value } }) => onChange && onChange(localToUTC(value));
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+  const dateValue = utcToLocal(value);
+  const displayLabel = getDisplayLabel(
+    schema,
+    uiSchema
+    /* TODO: , rootSchema */
+  );
+  return (
+    <Form.Input
+    key={id}
+    id={id}
+    type="datetime-local"
+    label={displayLabel ? label || schema.title : false}
+    required={required}
+    autoFocus={autofocus}
+    disabled={disabled || readonly}
+    name={name}
+    {...semanticProps}
+    value={dateValue}
+    onChange={_onChange}
+    onBlur={_onBlur}
+    onFocus={_onFocus}
+  />
+  );
+}
+
+DateTimeWidget.defaultProps = {
+  options: {
+    semantic: {
+      fluid: true,
+      inverted: false,
+    },
+  },
+};
+
+export default DateTimeWidget;
diff --git a/packages/semantic-ui/src/DateTimeWidget/index.js b/packages/semantic-ui/src/DateTimeWidget/index.js
@@ -0,0 +1,2 @@
+export { default } from './DateTimeWidget';
+export * from './DateTimeWidget';
diff --git a/packages/semantic-ui/src/DateWidget/DateWidget.js b/packages/semantic-ui/src/DateWidget/DateWidget.js
@@ -0,0 +1,63 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { getSemanticProps } from "../util";
+import { Form } from "semantic-ui-react";
+import {  utils } from "@rjsf/core";
+
+const { getDisplayLabel } = utils;
+function DateWidget(props) {
+  const {
+    id,
+    required,
+    readonly,
+    disabled,
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    formContext,
+    schema,
+    uiSchema,
+  } = props;
+  const semanticProps = getSemanticProps({ formContext, options });
+  const _onChange = ({ target: { value } }) => onChange && onChange(value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+  const displayLabel = getDisplayLabel(
+    schema,
+    uiSchema
+    /* TODO: , rootSchema */
+  );
+  return (
+    <Form.Input
+    key={id}
+    id={id}
+    type="date"
+    label={displayLabel ? label || schema.title : false}
+    required={required}
+    autoFocus={autofocus}
+    disabled={disabled || readonly}
+    name={name}
+    {...semanticProps}
+    value={value || value === 0 ? value : ""}
+    onChange={_onChange}
+    onBlur={_onBlur}
+    onFocus={_onFocus}
+  />
+  );
+}
+
+DateWidget.defaultProps = {
+  options: {
+    semantic: {
+      fluid: true,
+      inverted: false,
+    },
+  },
+};
+
+export default DateWidget;
diff --git a/packages/semantic-ui/src/DateWidget/index.js b/packages/semantic-ui/src/DateWidget/index.js
@@ -0,0 +1,2 @@
+export { default } from './DateWidget';
+export * from './DateWidget';
diff --git a/packages/semantic-ui/src/EmailWidget/EmailWidget.js b/packages/semantic-ui/src/EmailWidget/EmailWidget.js
@@ -0,0 +1,82 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Form } from "semantic-ui-react";
+import { getSemanticProps } from "../util";
+import {  utils } from "@rjsf/core";
+
+const { getDisplayLabel } = utils;
+function EmailWidget(props) {
+  const {
+    id,
+    required,
+    readonly,
+    disabled,
+    name,
+    label,
+    schema,
+    uiSchema,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    formContext,
+  } = props;
+  const semanticProps = getSemanticProps({ formContext, options });
+  // eslint-disable-next-line no-shadow
+  const _onChange = ({ target: { value } }) =>
+    onChange(value === "" ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+  const displayLabel = getDisplayLabel(
+    schema,
+    uiSchema
+    /* TODO: , rootSchema */
+  );
+  return (
+    <Form.Input
+      key={id}
+      id={id}
+      type="email"
+      label={displayLabel ? label || schema.title : false}
+      required={required}
+      autoFocus={autofocus}
+      disabled={disabled || readonly}
+      name={name}
+      {...semanticProps}
+      value={value || value === 0 ? value : ""}
+      onChange={_onChange}
+      onBlur={_onBlur}
+      onFocus={_onFocus}
+    />
+  );
+}
+
+EmailWidget.defaultProps = {
+  options: {
+    semantic: {
+      fluid: true,
+      inverted: false,
+    },
+  },
+};
+
+
+
+
+EmailWidget.defaultProps = {
+  options: {
+    semantic: {
+      fluid: true,
+      inverted: false,
+    },
+  },
+};
+
+
+EmailWidget.propTypes = {
+  options: PropTypes.object,
+};
+
+export default EmailWidget;
diff --git a/packages/semantic-ui/src/EmailWidget/index.js b/packages/semantic-ui/src/EmailWidget/index.js
@@ -0,0 +1,2 @@
+export { default } from './EmailWidget';
+export * from './EmailWidget';
diff --git a/packages/semantic-ui/src/SubmitButton/SubmitButton.js b/packages/semantic-ui/src/SubmitButton/SubmitButton.js
@@ -0,0 +1,4 @@
+import React from "react";
+import { Button } from "semantic-ui-react";
+export default () => (<Button content="Submit" type="submit" primary />);
+
diff --git a/packages/semantic-ui/src/SubmitButton/index.js b/packages/semantic-ui/src/SubmitButton/index.js
@@ -0,0 +1,2 @@
+export { default } from './SubmitButton';
+export * from './SubmitButton';
diff --git a/packages/semantic-ui/src/Theme/Theme.js b/packages/semantic-ui/src/Theme/Theme.js
@@ -1,5 +1,7 @@
+import React from 'react';
 import { utils } from '@rjsf/core';
 import { Form as SuiForm } from "semantic-ui-react";
+import SubmitButton from '../SubmitButton';
 import ArrayFieldTemplate from "../ArrayFieldTemplate";
 import ErrorList from "../ErrorList";
 import Fields from "../Fields";
@@ -17,6 +19,7 @@ const Theme = {
   ObjectFieldTemplate,
   tagName: SuiForm,
   widgets: { ...widgets, ...Widgets },
+  children: React.createElement(SubmitButton)
 };
 
 export default Theme;
diff --git a/packages/semantic-ui/src/URLWidget/URLWidget.js b/packages/semantic-ui/src/URLWidget/URLWidget.js
@@ -0,0 +1,64 @@
+import React from "react";
+import { Form } from "semantic-ui-react";
+import { getSemanticProps } from "../util";
+import {  utils } from "@rjsf/core";
+
+const { getDisplayLabel } = utils;
+function URLWidget(props) {
+  const {
+    id,
+    name,
+    label,
+    value,
+    required,
+    readonly,
+    disabled,
+    onChange,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    uiSchema,
+    formContext,
+  } = props;
+  const semanticProps = getSemanticProps({ formContext, options });
+  // eslint-disable-next-line no-shadow
+  const _onChange = ({ target: { value } }) =>
+    onChange(value === "" ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+  const displayLabel = getDisplayLabel(
+    schema,
+    uiSchema
+    /* TODO: , rootSchema */
+  );
+  return (
+    <Form.Input
+      key={id}
+      id={id}
+      type="url"
+      label={displayLabel ? label || schema.title : false}
+      required={required}
+      autoFocus={autofocus}
+      disabled={disabled || readonly}
+      name={name}
+      {...semanticProps}
+      value={value || value === 0 ? value : ""}
+      onChange={_onChange}
+      onBlur={_onBlur}
+      onFocus={_onFocus}
+    />
+  );
+}
+
+URLWidget.defaultProps = {
+  options: {
+    semantic: {
+      fluid: true,
+      inverted: false,
+    },
+  },
+};
+
+export default URLWidget;
diff --git a/packages/semantic-ui/src/URLWidget/index.js b/packages/semantic-ui/src/URLWidget/index.js
@@ -0,0 +1,2 @@
+export { default } from './URLWidget';
+export * from './URLWidget';
diff --git a/packages/semantic-ui/src/Widgets/Widgets.js b/packages/semantic-ui/src/Widgets/Widgets.js
@@ -7,11 +7,18 @@ import SelectWidget from "../SelectWidget/SelectWidget";
 import TextareaWidget from "../TextareaWidget/TextareaWidget";
 import TextWidget from "../TextWidget/TextWidget";
 import UpDownWidget from "../UpDownWidget/UpDownWidget";
-
+import DateWidget from "../DateWidget/DateWidget";
+import DateTimeWidget from "../DateTimeWidget/DateTimeWidget";
+import EmailWidget from "../EmailWidget/EmailWidget";
+import URLWidget from "../URLWidget/URLWidget";
 export default {
   CheckboxWidget,
   CheckboxesWidget,
+  DateWidget,
+  DateTimeWidget,
   PasswordWidget,
+  EmailWidget,
+  URLWidget,
   RadioWidget,
   RangeWidget,
   SelectWidget,

diff --git a/packages/semantic-ui/test/__snapshots__/Array.test.js.snap b/packages/semantic-ui/test/__snapshots__/Array.test.js.snap
@@ -40,14 +40,13 @@ exports[`array fields array 1`] = `
       </div>
     </div>
   </div>
-  <div>
-    <button
-      className="btn btn-info"
-      type="submit"
-    >
-      Submit
-    </button>
-  </div>
+  <button
+    className="ui primary button"
+    onClick={[Function]}
+    type="submit"
+  >
+    Submit
+  </button>
 </form>
 `;
 
@@ -155,14 +154,13 @@ exports[`array fields checkboxes 1`] = `
       </div>
     </div>
   </div>
-  <div>
-    <button
-      className="btn btn-info"
-      type="submit"
-    >
-      Submit
-    </button>
-  </div>
+  <button
+    className="ui primary button"
+    onClick={[Function]}
+    type="submit"
+  >
+    Submit
+  </button>
 </form>
 `;
 
@@ -272,13 +270,12 @@ exports[`array fields fixed array 1`] = `
       </div>
     </div>
   </div>
-  <div>
-    <button
-      className="btn btn-info"
-      type="submit"
-    >
-      Submit
-    </button>
-  </div>
+  <button
+    className="ui primary button"
+    onClick={[Function]}
+    type="submit"
+  >
+    Submit
+  </button>
 </form>
 `;