Add new format - buttonsSelect

MAIF · Jan 13, 2022 · 9475416 · 9475416
1 parent b656001
commit 9475416
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,7 @@ export const Example = () => {
 - **type** (required): the type of value. It provided by the imported object `type`. It could be just string like `string`, `number`, `bool`, `object`, `date` or `file`
 - **format**: Over the type you can display a special format for the field. It provided by the imported object `format` or just a string
   - `select`: display a [react-select](https://react-select.com/home) field with provided options
+  - `buttonsSelect`: display a buttons group, drawn with the same options than the format `select`
   - `code`: if the type is `string`, display a code input (draw with [react-ace](https://github.com/securingsincity/react-ace))
   - `markdown`: if the type is `string`, display a markdown input
   - `text`: if the type is `string`, display a textarea

diff --git a/src/form.js b/src/form.js
@@ -360,6 +360,7 @@ const Step = ({ entry, step, error, register, schema, control, trigger, getValue
             }}
           />
         )
+        case format.buttonsSelect:
         case format.select:
           return (
             <Controller
@@ -401,6 +402,7 @@ const Step = ({ entry, step, error, register, schema, control, trigger, getValue
 
     case type.number:
       switch (step.format) {
+        case format.buttonsSelect:
         case format.select:
           return (
             <Controller
@@ -464,6 +466,7 @@ const Step = ({ entry, step, error, register, schema, control, trigger, getValue
 
     case type.object:
       switch (step.format) {
+        case format.buttonsSelect:
         case format.select:
           return (
             <Controller

diff --git a/src/format.ts b/src/format.ts
@@ -7,5 +7,6 @@ export const format = {
   email: 'email',
   password: 'password',
   hidden: 'hidden',
-  form: 'form'
+  form: 'form',
+  buttonsSelect: 'buttons'
 }
diff --git a/src/inputs/SelectInput.js b/src/inputs/SelectInput.js
@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
 import CreatableSelect from 'react-select/creatable';
 import Select from 'react-select';
 import { option } from '../Option';
 import { deepEqual } from '../utils'
+import { format } from '..';
+import { useCustomStyle } from '../styleContext';
 
 const valueToSelectOption = (value, possibleValues = [], isMulti = false, maybeTransformer) => {
   if (value === null) {
@@ -20,6 +23,7 @@ const valueToSelectOption = (value, possibleValues = [], isMulti = false, maybeT
 };
 
 export const SelectInput = (props) => {
+  const classes = useCustomStyle()
   const possibleValues = (props.possibleValues || [])
     .map(v => props.transformer ? props.transformer(v) : v)
     .map(v => ({
@@ -80,6 +84,36 @@ export const SelectInput = (props) => {
     }
   }
 
+  const handleSelectButtonClick = (v) => {
+    if (props.isMulti) {
+      if (value.includes(v)) {
+        return onChange(value.filter(val => val.value !== v.value))
+      } else {
+        return onChange([...value, v])
+      }
+    }
+    return onChange(v)
+  }
+
+  if (props.format === format.buttonsSelect) {
+    return (
+      <div style={{ display: 'flex' }}>
+        {values.map((v, idx) => {
+          const active = props.isMulti ? value.includes(v) : v.value === value.value
+          return (
+            <button
+              key={idx}
+              type="button"
+              className={classNames(props.className, classes.btn, classes.btn_grey, classes.ml_5, { active })}
+              onClick={() => handleSelectButtonClick(v)}>
+              {v.label}
+            </button>
+          )
+        })}
+      </div>
+    )
+  }
+
   if (props.createOption) {
     return (
       <CreatableSelect

diff --git a/src/style.js b/src/style.js
@@ -1,3 +1,19 @@
+const buttonOutline = (color, darker) => ({
+  color,
+  borderColor: color,
+  "&:hover": {
+    color: '#fff',
+    backgroundColor: color,
+    borderColor: darker,
+  },
+  "&.active": {
+    color: '#fff',
+    backgroundColor: color,
+    borderColor: darker,
+  },
+
+})
+
 export const style = {
   input: {
     display: "block",
@@ -17,7 +33,8 @@ export const style = {
     padding: 10,
     fontSize: "1rem",
     cursor: "pointer",
-    border: 0,
+    borderWidth: '1px',
+    backgroundColor: '#fff'
   },
   btn_sm: {
     fontSize: "0.875rem",
@@ -33,42 +50,10 @@ export const style = {
       borderBottomLeftRadius: 0,
     },
   },
-  btn_red: {
-    color: "#fff",
-    backgroundColor: "#dc3545",
-    borderColor: "#dc3545",
-    "&:hover": {
-      backgroundColor: "#c82333",
-      borderColor: "#bd2130",
-    },
-  },
-  btn_green: {
-    color: "#fff",
-    backgroundColor: "#28a745",
-    borderColor: "#28a745",
-    "&:hover": {
-      backgroundColor: "#218838",
-      borderColor: "#1e7e34",
-    },
-  },
-  btn_blue: {
-    color: "#fff",
-    backgroundColor: "#007bff",
-    borderColor: "#007bff",
-    "&:hover": {
-      backgroundColor: "#0069d9",
-      borderColor: "#0062cc",
-    },
-  },
-  btn_grey: {
-    color: "#fff",
-    backgroundColor: "#6c757d",
-    borderColor: "#6c757d",
-    "&:hover": {
-      backgroundColor: "#5c636a",
-      borderColor: "#5c636a",
-    },
-  },
+  btn_red: buttonOutline("#dc3545", "#bd2130"),
+  btn_green: buttonOutline("#28a745", "#1e7e34"),
+  btn_blue: buttonOutline("#007bff", "#0069d9"),
+  btn_grey: buttonOutline("#6c757d", "#5c636a"),
   txt_red: {
     color: "#dc3545",
   },
@@ -149,7 +134,7 @@ export const style = {
     color: "tomato"
   },
   input__invalid: {
-    borderColor: '#dc3545'
+    borderColor: '#dc3545 !important',
   },
   invalid_feedback: {
     width: "100%",