implementds buttons select for boolean input

README.md

@@ -69,7 +69,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 is 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`. You can add the property `isClearable` as boolean to `props` to add the ability to unselect value 
+  - `buttonsSelect`: display a buttons group, drawn with the same options than the format `select`. You can add the property `isClearable` as boolean to `props` to add the ability to unselect value. This format also works to display two buttons instead of a switch for `type.bool` (add props `truelabel` & `falseLabel` to customize buttons display).
   - `code`: if the type is `string`, display a code input (draw with [react-ace](https://github.com/securingsincity/react-ace)) (add a props.setRef to get ace editor ref)
   - `singleLineCode`: renders text input with syntax highlighting (draw with [react-ace](https://github.com/securingsincity/react-ace)) (add a props.setRef to get ace editor ref)
   - `markdown`: if the type is `string`, display a markdown input. You can add buttons into toolbar by inject a JSX.element thanks to the `actions` property from `props` taking on params the insert function.

src/form/step.tsx

@@ -296,7 +296,10 @@ export const Step = (props: {
           informations={informations}
           deactivateReactMemo={deactivateReactMemo}
           inputWrapper={inputWrapper}>
-          <BooleanInput className={step.className} errorDisplayed={errorDisplayed} />
+          <BooleanInput
+            className={step.className}
+            errorDisplayed={errorDisplayed}
+            buttons={step.format === format.buttonsSelect} />
         </ControlledInput>
       )
 
@@ -326,7 +329,7 @@ export const Step = (props: {
           const flow = option(step.flow).getOrElse(option(step.schema).map(s => Object.keys(s)).getOrElse([]));
           return (
             <ControlledInput step={{ ...step, defaultValue: value || defaultValue }} entry={entry} realEntry={realEntry} errorDisplayed={errorDisplayed} informations={informations} deactivateReactMemo={deactivateReactMemo} inputWrapper={inputWrapper}>
-              <CustomizableInput  
+              <CustomizableInput
                 render={step.render}
                 rawValues={getValues()}
                 value={getValues(entry)}

src/inputs/BooleanInput.tsx

@@ -7,9 +7,12 @@ interface PropType {
   readOnly?: boolean;
   className?: string;
   errorDisplayed?: boolean;
+  buttons?: boolean;
+  trueLabel?: string;
+  falseLabel?: string
 }
 
-export const BooleanInput = ({ onChange, value, readOnly, className, errorDisplayed }: PropType) => {
+export const BooleanInput = ({ onChange, value, readOnly, className, errorDisplayed, buttons, trueLabel, falseLabel }: PropType) => {
     const handleClick = (value: boolean) => {
       if (!readOnly) {
         onChange?.(value);
@@ -29,5 +32,14 @@ export const BooleanInput = ({ onChange, value, readOnly, className, errorDispla
       callback = () => handleClick(false);
     }
 
+    if (buttons) {
+      return (
+        <div className='d-flex'>
+            <button type="button" className={classNames('mrf-flex_grow_1 mrf-btn mrf-btn_grey mrf-ml_5', {active: !!value})} onClick={() => onChange!(true)}>{trueLabel || 'true'}</button>
+            <button type="button" className={classNames('mrf-flex_grow_1 mrf-btn mrf-btn_grey mrf-ml_5', {active: !value})} onClick={() => onChange!(false)}>{falseLabel || 'false'}</button>
+          </div>
+      )
+    }
+
     return <input type="checkbox" className={classes} onChange={callback} />;
   }