widgets: add number and boolean widgets

Author: zzacharo

src/lib/forms/SelectField.js

@@ -49,10 +49,12 @@ export class SelectField extends Component {
       options,
       onChange,
       onAddItem,
+      multiple,
       ...uiProps
     } = cmpProps;
-    const value = getIn(values, fieldPath, defaultValue);
-    const initialValue = getIn(initialValues, fieldPath, "");
+    const _defaultValue = multiple ? [] : "";
+    const value = getIn(values, fieldPath, defaultValue || _defaultValue);
+    const initialValue = getIn(initialValues, fieldPath, _defaultValue);
     return (
       <Form.Dropdown
         fluid
@@ -84,6 +86,7 @@ export class SelectField extends Component {
         }}
         options={options}
         value={value}
+        multiple={multiple}
         {...uiProps}
       />
     );
@@ -112,6 +115,7 @@ SelectField.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   onChange: PropTypes.func,
   onAddItem: PropTypes.func,
+  multiple: PropTypes.bool,
 };
 
 SelectField.defaultProps = {
@@ -121,4 +125,5 @@ SelectField.defaultProps = {
   label: "",
   onChange: undefined,
   onAddItem: undefined,
+  multiple: false,
 };

src/lib/forms/widgets/text/BooleanInput.js

@@ -0,0 +1,65 @@
+// This file is part of React-Invenio-Forms
+// Copyright (C) 2020 CERN.
+// Copyright (C) 2020 Northwestern University.
+//
+// React-Invenio-Forms is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+import PropTypes from "prop-types";
+import React from "react";
+import { Form } from "semantic-ui-react";
+import { FieldLabel } from "../../FieldLabel";
+import { RadioField } from "../../RadioField";
+import { useField } from "formik";
+
+export default function BooleanInput({
+  description,
+  icon,
+  falseLabel,
+  fieldPath,
+  label,
+  trueLabel,
+  required,
+}) {
+  const [meta] = useField(fieldPath);
+  console.log(meta);
+  return (
+    <>
+      <Form.Group inline className="mb-0" required>
+        <Form.Field required={required} error={meta.error}>
+          <FieldLabel htmlFor={fieldPath} icon={icon} label={label} />
+        </Form.Field>
+        <RadioField
+          fieldPath={fieldPath}
+          label={trueLabel}
+          checked={meta.value === true}
+          value
+          optimized
+        />
+        <RadioField
+          fieldPath={fieldPath}
+          label={falseLabel}
+          checked={meta.value === false}
+          value={false}
+          optimized
+        />
+      </Form.Group>
+      {description && <label className="helptext">{description}</label>}
+    </>
+  );
+}
+
+BooleanInput.propTypes = {
+  fieldPath: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  trueLabel: PropTypes.string.isRequired,
+  falseLabel: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+BooleanInput.defaultProps = {
+  icon: undefined,
+  required: false,
+};

src/lib/forms/widgets/text/Input.js

@@ -6,8 +6,16 @@ import { TextField } from "../../TextField";
 
 export default class Input extends Component {
   render() {
-    const { fieldPath, required, label, icon, placeholder, description, disabled } =
-      this.props;
+    const {
+      fieldPath,
+      required,
+      label,
+      icon,
+      placeholder,
+      description,
+      disabled,
+      type,
+    } = this.props;
 
     return (
       <TextField
@@ -18,6 +26,7 @@ export default class Input extends Component {
         disabled={disabled}
         label={<FieldLabel htmlFor={fieldPath} icon={icon} label={label} />}
         placeholder={placeholder}
+        type={type}
       />
     );
   }
@@ -31,10 +40,12 @@ Input.propTypes = {
   icon: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
+  type: PropTypes.string,
 };
 
 Input.defaultProps = {
   icon: undefined,
   required: false,
   disabled: false,
+  type: "input",
 };

src/lib/forms/widgets/text/NumberInput.js

@@ -0,0 +1,5 @@
+import React from "react";
+import Input from "./Input";
+
+const NumberInput = (props) => <Input {...props} type="number" />;
+export default NumberInput;

src/lib/forms/widgets/text/index.js

@@ -2,3 +2,5 @@ export { default as RichInput } from "./RichInput";
 export { default as TextArea } from "./TextArea";
 export { default as Input } from "./Input";
 export { default as MultiInput } from "./MultiInput";
+export { default as NumberInput } from "./NumberInput";
+export { default as BooleanInput } from "./BooleanInput";