From de8d0ff7f26f6d7905a51d903b3a94c6cbe1771e Mon Sep 17 00:00:00 2001
From: Jacques Nel <jacqueswho@gmail.com>
Date: Thu, 12 Aug 2021 14:15:34 +0200
Subject: [PATCH] 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 <jacques@trixta.com>
---
 .../src/DateTimeWidget/DateTimeWidget.js      |  65 +++++++
 .../semantic-ui/src/DateTimeWidget/index.js   |   2 +
 .../semantic-ui/src/DateWidget/DateWidget.js  |  63 +++++++
 packages/semantic-ui/src/DateWidget/index.js  |   2 +
 .../src/EmailWidget/EmailWidget.js            |  82 +++++++++
 packages/semantic-ui/src/EmailWidget/index.js |   2 +
 .../src/SubmitButton/SubmitButton.js          |   4 +
 .../semantic-ui/src/SubmitButton/index.js     |   2 +
 packages/semantic-ui/src/Theme/Theme.js       |   3 +
 .../semantic-ui/src/URLWidget/URLWidget.js    |  64 +++++++
 packages/semantic-ui/src/URLWidget/index.js   |   2 +
 packages/semantic-ui/src/Widgets/Widgets.js   |   9 +-
 .../test/__snapshots__/Array.test.js.snap     |  45 +++--
 .../test/__snapshots__/Form.test.js.snap      | 167 +++++++++---------
 .../test/__snapshots__/Object.test.js.snap    |  15 +-
 15 files changed, 410 insertions(+), 117 deletions(-)
 create mode 100644 packages/semantic-ui/src/DateTimeWidget/DateTimeWidget.js
 create mode 100644 packages/semantic-ui/src/DateTimeWidget/index.js
 create mode 100644 packages/semantic-ui/src/DateWidget/DateWidget.js
 create mode 100644 packages/semantic-ui/src/DateWidget/index.js
 create mode 100644 packages/semantic-ui/src/EmailWidget/EmailWidget.js
 create mode 100644 packages/semantic-ui/src/EmailWidget/index.js
 create mode 100644 packages/semantic-ui/src/SubmitButton/SubmitButton.js
 create mode 100644 packages/semantic-ui/src/SubmitButton/index.js
 create mode 100644 packages/semantic-ui/src/URLWidget/URLWidget.js
 create mode 100644 packages/semantic-ui/src/URLWidget/index.js

diff --git a/packages/semantic-ui/src/DateTimeWidget/DateTimeWidget.js b/packages/semantic-ui/src/DateTimeWidget/DateTimeWidget.js
new file mode 100644
index 0000000000..429cae9143
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..0db366167f
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..7da21c6bb0
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..923b0077fb
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..e7caa0e8c4
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..c48979eea8
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..afab81e7fb
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..f676497ba2
--- /dev/null
+++ 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
index f57f686eeb..d086674893 100644
--- 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
new file mode 100644
index 0000000000..eed540190b
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..65d5258635
--- /dev/null
+++ 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
index b375ed1061..93847482b5 100644
--- 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
index df8969db9a..2e9eabc1cd 100644
--- 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>
 `;
diff --git a/packages/semantic-ui/test/__snapshots__/Form.test.js.snap b/packages/semantic-ui/test/__snapshots__/Form.test.js.snap
index 3728051b95..a5d71731f7 100644
--- a/packages/semantic-ui/test/__snapshots__/Form.test.js.snap
+++ b/packages/semantic-ui/test/__snapshots__/Form.test.js.snap
@@ -9,14 +9,13 @@ exports[`single fields null field 1`] = `
   <div
     className="grouped equal width fields"
   />
-  <div>
-    <button
-      className="btn btn-info"
-      type="submit"
-    >
-      Submit
-    </button>
-  </div>
+  <button
+    className="ui primary button"
+    onClick={[Function]}
+    type="submit"
+  >
+    Submit
+  </button>
 </form>
 `;
 
@@ -49,14 +48,13 @@ exports[`single fields number field 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>
 `;
 
@@ -82,14 +80,13 @@ exports[`single fields string field format data-url 1`] = `
       </p>
     </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>
 `;
 
@@ -102,30 +99,32 @@ exports[`single fields string field format email 1`] = `
   <div
     className="grouped equal width fields"
   >
-    <input
-      autoFocus={false}
-      className="form-control"
-      disabled={false}
-      id="root"
-      list={null}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder=""
-      readOnly={false}
-      required={false}
-      type="email"
-      value=""
-    />
-  </div>
-  <div>
-    <button
-      className="btn btn-info"
-      type="submit"
+    <div
+      className="field"
     >
-      Submit
-    </button>
+      <div
+        className="ui fluid input"
+      >
+        <input
+          autoFocus={false}
+          disabled={false}
+          id="root"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          type="email"
+          value=""
+        />
+      </div>
+    </div>
   </div>
+  <button
+    className="ui primary button"
+    onClick={[Function]}
+    type="submit"
+  >
+    Submit
+  </button>
 </form>
 `;
 
@@ -138,30 +137,32 @@ exports[`single fields string field format uri 1`] = `
   <div
     className="grouped equal width fields"
   >
-    <input
-      autoFocus={false}
-      className="form-control"
-      disabled={false}
-      id="root"
-      list={null}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      placeholder=""
-      readOnly={false}
-      required={false}
-      type="url"
-      value=""
-    />
-  </div>
-  <div>
-    <button
-      className="btn btn-info"
-      type="submit"
+    <div
+      className="field"
     >
-      Submit
-    </button>
+      <div
+        className="ui fluid input"
+      >
+        <input
+          autoFocus={false}
+          disabled={false}
+          id="root"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          type="url"
+          value=""
+        />
+      </div>
+    </div>
   </div>
+  <button
+    className="ui primary button"
+    onClick={[Function]}
+    type="submit"
+  >
+    Submit
+  </button>
 </form>
 `;
 
@@ -194,14 +195,13 @@ exports[`single fields string field regular 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>
 `;
 
@@ -237,13 +237,12 @@ exports[`single fields unsupported field 1`] = `
       </pre>
     </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>
 `;
diff --git a/packages/semantic-ui/test/__snapshots__/Object.test.js.snap b/packages/semantic-ui/test/__snapshots__/Object.test.js.snap
index 86f8cfd3aa..b7ff85edfc 100644
--- a/packages/semantic-ui/test/__snapshots__/Object.test.js.snap
+++ b/packages/semantic-ui/test/__snapshots__/Object.test.js.snap
@@ -68,13 +68,12 @@ exports[`object fields object 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>
 `;