Is some type missing ?? (Download, enum, range, radio)

[PaulB2Code]

Your issue may already be reported!
Please search on the issue tracker before creating one.

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Is it normal that some type do not work ?

Do you plan to integrate it ?

Thank you

"jsonSchema": "{“description”:”“,”properties”:{“Case à cocher”:{“items”:{“enum”:[“Info 1”,” Info 2”,” Info 3”],”type”:”string”},”title”:”Case à cocher”,”type”:”array”,”uniqueItems”:true},”Date”:{“format”:”date”,”title”:”Date”,”type”:”string”},”Download”:{“format”:”data-url”,”title”:”Download”,”type”:”string”},”Liste bouton”:{“enum”:[“Info 1”,” Info 2”,” Info 3”],”title”:”Liste bouton”,”type”:”string”},”Liste déroulante”:{“enum”:[“Info 1”,” Info 2”,” Info 3”],”title”:”Liste déroulante”,”type”:”string”},”Mot de passe”:{“title”:”Mot de passe”,”type”:”string”},”Nombre”:{“title”:”Nombre”,”type”:”number”},”Nombre à glissère”:{“title”:”Nombre à glissère”,”type”:”integer”},”Texte”:{“title”:”Texte”,”type”:”string”}},”required”:[“Texte”,”Nombre”,”Date”,”Case à cocher”,”Liste déroulante”,”Liste bouton”,”Nombre à glissère”,”Mot de passe”],”title”:”Question multi info”,”type”:”object”}",

"uiSchema": "{“Case à cocher”:{“ui:widget”:”checkboxes”},”Liste bouton”:{“ui:placeholder”:”Choisissez”,”ui:widget”:”radio”},”Liste déroulante”:{“ui:placeholder”:”Choisissez”,”ui:widget”:”select”},”Mot de passe”:{“ui:widget”:”password”},”Nombre à glissère”:{“ui:widget”:”range”},”ui:order”:[“Texte”,”Nombre”,”Date”,”Download”,”Case à cocher”,”Liste déroulante”,”Liste bouton”,”Nombre à glissère”,”Mot de passe”]}"

Your Environment

• Version used: Android Expo
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

[CareLuLu-Gabriel]

@PaulB2Code the uiSchema needs to be adjusted a bit. Would you be interested in implementing the slider widget?

The complete code I used to test is below:

import React from 'react';
import { StyleSheet } from 'react-native';
import { createMemoryHistory } from 'history';
import {
  Router,
  Switch,
  UIProvider,
  Column,
  MainContainer,
} from 'react-native-web-ui-components';
import Form from 'react-native-web-jsonschema-form';
import { useScreen } from 'react-native-web-ui-components/Screen';

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  center: {
    alignItems: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
});

const history = createMemoryHistory();

const schema = {
  description: '',
  properties: {
    'Case à cocher': {
      items: {
        enum: ['Info 1', 'Info 2', 'Info 3'],
        type: 'string',
      },
      title: 'Case à cocher',
      type: 'array',
      uniqueItems: true, // currently not implemented
    },
    Date: {
      format: 'date',
      type: 'string',
      title: 'Date',
    },
    Download: {
      format: 'data-url',
      type: 'string',
      title: 'Download',
    },
    'Liste bouton': {
      enum: ['Info 1', 'Info 2', 'Info 3'],
      title: 'Liste bouton',
      type: 'string',
    },
    'Liste déroulante': {
      enum: ['Info 1', 'Info 2', 'Info 3'],
      title: 'Liste déroulante',
      type: 'string'
    },
    'Mot de passe': {
      title: 'Mot de passe',
      type: 'string'
    },
    Nombre: {
      title: 'Nombre',
      type: 'number',
    },
    'Nombre à glissère': {
      title: 'Nombre à glissère',
      type: 'integer',
    },
    'Texte': {
      title: 'Texte',
      type: 'string',
    }
  },
  required: [
    'Texte',
    'Nombre',
    'Date',
    'Case à cocher',
    'Liste déroulante',
    'Liste bouton',
    'Nombre à glissère',
    'Mot de passe',
  ],
  title: 'Question multi info',
  type: 'object',
};

const uiSchema = {
  'Case à cocher': {
    // currently not supported for array types
    // but I think it's a good idea. We will implement that.
    // 'ui:widget':'checkboxes',

    // For now, workaround would be.
    'ui:options': {
      addable: false,
      removable: false,
      orderable: false,
      minimumNumberOfItems: schema.properties['Case à cocher'].items.enum.length,
    },
    items: {
      'ui:title': false,

      // Array items can have specific uiSchema
      // by using 'ui:iterate'. 
      'ui:iterate': (index, { value }) => {
        const text = schema.properties['Case à cocher'].items.enum[index];
        return {
          'ui:title': false,
          'ui:widget': 'checkbox',
          'ui:widgetProps': {
            text,
            value: text,
            adjustTitle: false,

            // checked if the text is in the array.
            checked: (value || []).includes(text),
          },
        };
      },
    },
  },
  Date: {
    'ui:widget': 'date',
  },
  Download: {
    'ui:widget': 'file',
  },
  'Liste bouton': {
    'ui:placeholder': 'Choisissez',
    'ui:widget': 'radioboxes',
  },
  'Liste déroulante': {
    'ui:placeholder': 'Choisissez',
    'ui:widget': 'select',
  },
  'Mot de passe': {
    'ui:widget': 'password',
  },
  'Nombre à glissère': {
    // Slider has not been implemented yet.
    // It's the plan to implement sliders as well.
    // It shouldn't be hard since `react-native-web-ui-components`
    // has sliders already.
    'ui:widget': 'range'
  },
  'ui:order': [
    'Texte',
    'Nombre',
    'Date',
    'Download',
    'Case à cocher',
    'Liste déroulante',
    'Liste bouton',
    'Nombre à glissère',
    'Mot de passe',
  ],
};

const App = () => {
  const screen = useScreen();

  // Router and Switch are required because
  // the upload link of the file widget uses Link.
  return (
    <Router history={history}>
      <Switch history={history} gestureEnabled={false}>
        <UIProvider amp={false}>
          <MainContainer style={styles.container}>
            <Column xs={12} style={styles.center}>
              <Form
                schema={schema}
                uiSchema={uiSchema}
              />
            </Column>
          </MainContainer>
        </UIProvider>
      </Switch>
    </Router>
  );
}

export default App;

[CareLuLu-Gabriel]

@PaulB2Code I just created a task to add the range widget. We will try to work on that soon. #116