@draftbit/ui/src/mappings/DatePicker.js

Draftbit UI Library

import {
  COMPONENT_TYPES,
  FORM_TYPES,
  PROP_TYPES,
  FIELD_NAME,
  GROUPS,
} from "../core/component-types";

const SEED_DATA_PROPS = {
  label: {
    label: "Label",
    description: "The label to be displayed on the picker",
    formType: FORM_TYPES.string,
    propType: PROP_TYPES.STRING,
    defaultValue: "Date",
    editable: true,
    required: true,
    group: GROUPS.data,
  },
  mode: {
    label: "Mode",
    description: "Choose between date, time and datetime",
    defaultValue: "date",
    editable: true,
    required: true,
    formType: FORM_TYPES.flatArray,
    propType: PROP_TYPES.STRING,
    options: ["date", "time", "datetime"],
    group: GROUPS.basic,
  },
  assistiveText: {
    label: "Assistive text",
    description: "Helper text to display below the picker",
    formType: FORM_TYPES.string,
    propType: PROP_TYPES.STRING,
    defaultValue: null,
    editable: true,
    required: false,
    group: GROUPS.basic,
  },
  locale: {
    label: "Locale",
    description: "Locale for the datepicker. Must be a valid Locale",
    formType: FORM_TYPES.string,
    propType: PROP_TYPES.STRING,
    defaultValue: null,
    editable: true,
    required: false,
    group: GROUPS.basic,
  },
  minuteInterval: {
    label: "Minute Interval",
    description: "The interval at which minutes can be selected",
    formType: FORM_TYPES.flatArray,
    propType: PROP_TYPES.NUMBER,
    options: [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30],
    defaultValue: null,
    editable: true,
    required: false,
    group: GROUPS.basic,
  },
  timeZoneOffsetInMinutes: {
    label: "Time zone offset",
    description:
      "By default, the datepicker uses the device's timezone. This will allow you to offset it",
    formType: FORM_TYPES.number,
    propType: PROP_TYPES.NUMBER,
    defaultValue: null,
    editable: true,
    required: false,
    group: GROUPS.basic,
  },
  initialDate: {
    label: "Initial Date",
    description:
      "Optionally set an initial date to make your forms easier to work with",
    formType: FORM_TYPES.date,
    propType: PROP_TYPES.STRING,
    defaultValue: null,
    editable: true,
    required: false,
    group: GROUPS.basic,
  },
  options: {
    label: "Options",
    description:
      "Array of picker options. An array of objects containing a label and value.",
    editable: true,
    required: false,
    formType: FORM_TYPES.array,
    propType: PROP_TYPES.OBJECT,
    defaultValue: null,
    options: [],
    group: GROUPS.data,
  },
  disabled: {
    label: "Disabled",
    description:
      "Whether the picker should be disabled. Will prevent selection and show a greyed out state.",
    formType: FORM_TYPES.boolean,
    propType: PROP_TYPES.BOOLEAN,
    defaultValue: false,
    editable: true,
    required: false,
    group: GROUPS.basic,
  },
  error: {
    label: "Error",
    description: "Whether the picker should display the error state",
    formType: FORM_TYPES.boolean,
    propType: PROP_TYPES.BOOLEAN,
    defaultValue: false,
    editable: true,
    required: false,
    group: GROUPS.data,
  },
  leftIconName: {
    label: "Left icon name",
    description: "The icon to display on the left",
    formType: FORM_TYPES.icon,
    propType: PROP_TYPES.STRING,
    defaultValue: null,
    editable: true,
    required: false,
    group: GROUPS.basic,
  },
  leftIconMode: {
    label: "Left icon mode",
    description:
      "The mode of the icon to display on the left. 'inset' or 'outset'.",
    formType: FORM_TYPES.flatArray,
    propType: PROP_TYPES.STRING,
    defaultValue: "inset",
    options: ["inset", "outset"],
    editable: true,
    required: true,
    group: GROUPS.basic,
  },
  rightIconName: {
    label: "Right icon name",
    description: "The icon to display on the right",
    formType: FORM_TYPES.icon,
    propType: PROP_TYPES.STRING,
    defaultValue: null,
    editable: true,
    required: false,
    group: GROUPS.basic,
  },
  fieldName: {
    ...FIELD_NAME,
    handlerPropName: "onDateChange",
    valuePropName: "date",
    defaultValue: "date",
  },
};

export const SEED_DATA = [
  {
    name: "Date Picker - Solid",
    tag: "DatePicker",
    description: "A date picker with a solid border",
    category: COMPONENT_TYPES.field,
    layout: null,
    props: {
      ...SEED_DATA_PROPS,
      type: {
        label: "Type",
        description: "Type of Datepicker",
        formType: FORM_TYPES.string,
        propType: PROP_TYPES.STRING,
        defaultValue: "solid",
        editable: false,
        required: false,
        group: GROUPS.basic,
      },
    },
  },
  {
    name: "Date Picker - Underline",
    tag: "DatePicker",
    description: "A date picker with an underline",
    category: COMPONENT_TYPES.field,
    layout: null,
    props: {
      ...SEED_DATA_PROPS,
      type: {
        label: "Type",
        description: "Type of Datepicker",
        formType: FORM_TYPES.string,
        propType: PROP_TYPES.STRING,
        defaultValue: "underline",
        editable: false,
        required: false,
        group: GROUPS.basic,
      },
    },
  },
];