@hrobarikt/box-ui-elements/es/components/date-picker/DatePicker.stories.js

Box UI Elements

import * as React from 'react';
import { IntlProvider } from 'react-intl';
import { State, Store } from '@sambego/storybook-state';
import DatePicker from './DatePicker';
import notes from './DatePicker.stories.md';
export var basic = function basic() {
  var MIN_TIME = new Date(0);
  var TODAY = new Date('July 18, 2018');
  var yearRange = [MIN_TIME.getFullYear(), TODAY.getFullYear()];
  var componentStore = new Store({
    date: new Date('July 9, 2018'),
    fromDate: null,
    toDate: null
  });
  return React.createElement(State, {
    store: componentStore
  }, function (state) {
    return React.createElement(IntlProvider, {
      locale: "en-US"
    }, React.createElement(DatePicker, {
      className: "date-picker-example",
      displayFormat: {
        day: 'numeric',
        month: 'long',
        year: 'numeric'
      },
      label: "Date",
      name: "datepicker",
      onChange: function onChange(date) {
        componentStore.set({
          date: date
        });
      },
      placeholder: "Date",
      value: state.date,
      yearRange: yearRange
    }));
  });
};
export var withDescription = function withDescription() {
  return React.createElement(IntlProvider, {
    locale: "en-US"
  }, React.createElement(DatePicker, {
    placeholder: "Date",
    description: "Date of your birth",
    label: "Date Picker"
  }));
};
export var manuallyEditable = function manuallyEditable() {
  return React.createElement(IntlProvider, {
    locale: "en-US"
  }, React.createElement(DatePicker, {
    isTextInputAllowed: true,
    placeholder: "Date",
    label: "Date Picker",
    value: new Date('September 27, 2019')
  }));
};
export var disabledWithErrorMessage = function disabledWithErrorMessage() {
  return React.createElement(IntlProvider, {
    locale: "en-US"
  }, React.createElement(DatePicker, {
    isDisabled: true,
    error: "Error Message",
    placeholder: "Date",
    name: "datepicker",
    label: "Disabled Date Picker"
  }));
};
export var customErrorTooltipPosition = function customErrorTooltipPosition() {
  return React.createElement(IntlProvider, {
    locale: "en-US"
  }, React.createElement(DatePicker, {
    error: "Error Message",
    errorTooltipPosition: "middle-right",
    placeholder: "Date",
    name: "datepicker",
    label: "Disabled Date Picker"
  }));
};
export var withRange = function withRange() {
  var MAX_TIME = new Date('3000-01-01T00:00:00.000Z');
  var MIN_TIME = new Date(0);
  var TODAY = new Date();
  var componentStore = new Store({
    date: new Date(),
    fromDate: null,
    toDate: null
  });
  return React.createElement(State, {
    store: componentStore
  }, function (state) {
    return React.createElement(IntlProvider, {
      locale: "en-US"
    }, React.createElement("div", null, React.createElement(DatePicker, {
      className: "date-picker-example",
      displayFormat: {
        day: 'numeric',
        month: 'long',
        year: 'numeric'
      },
      hideOptionalLabel: true,
      label: "From Date",
      maxDate: state.toDate || MAX_TIME,
      name: "datepicker-from",
      onChange: function onChange(date) {
        componentStore.set({
          fromDate: date
        });
      },
      placeholder: "Choose a Date",
      value: state.fromDate
    }), React.createElement(DatePicker, {
      className: "date-picker-example",
      displayFormat: {
        day: 'numeric',
        month: 'long',
        year: 'numeric'
      },
      hideOptionalLabel: true,
      label: "To Date",
      minDate: state.fromDate || MIN_TIME,
      maxDate: TODAY,
      name: "datepicker-to",
      onChange: function onChange(date) {
        componentStore.set({
          toDate: date
        });
      },
      placeholder: "Choose a Date",
      value: state.toDate
    })));
  });
};
export default {
  title: 'Components|DatePicker',
  component: DatePicker,
  parameters: {
    notes: notes
  }
};
//# sourceMappingURL=DatePicker.stories.js.map