Async components

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- [#692](https://github.com/plotly/dash-core-components/pull/692) Async DatePickerSingle, DatePickerRange, Dropdown, Markdown, Upload components
+
 ## [1.4.0] - 2019-10-29
 ### Added
 - [#616](https://github.com/plotly/dash-core-components/pull/616) Async Graph and Plotly.js

dash_core_components_base/__init__.py

@@ -39,7 +39,37 @@
 
 _this_module = _sys.modules[__name__]
 
-_js_dist = [
+async_resources = [
+    'datepicker',
+    'dropdown',
+    'graph',
+    'markdown',
+    'upload'
+]
+
+_js_dist = []
+
+_js_dist.extend([{
+        'relative_package_path': 'async~{}.js'.format(async_resource),
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/async~{}.js'
+        ).format(__version__, async_resource),
+        'namespace': 'dash_core_components',
+        'async': True
+    } for async_resource in async_resources])
+
+_js_dist.extend([{
+        'relative_package_path': 'async~{}.js.map'.format(async_resource),
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/async~{}.js.map'
+        ).format(__version__, async_resource),
+        'namespace': 'dash_core_components',
+        'dynamic': True
+    } for async_resource in async_resources])
+
+_js_dist.extend([
     {
         'relative_package_path': 'highlight.pack.js',
         'namespace': 'dash_core_components'
@@ -61,24 +91,6 @@
         'namespace': 'dash_core_components',
         'dynamic': True
     },
-    {
-        'relative_package_path': 'async~graph.js',
-        'external_url': (
-            'https://unpkg.com/dash-core-components@{}'
-            '/dash_core_components/async~graph.js'
-        ).format(__version__),
-        'namespace': 'dash_core_components',
-        'async': True
-    },
-    {
-        'relative_package_path': 'async~graph.js.map',
-        'external_url': (
-            'https://unpkg.com/dash-core-components@{}'
-            '/dash_core_components/async~graph.js.map'
-        ).format(__version__),
-        'namespace': 'dash_core_components',
-        'dynamic': True
-    },
     {
         'relative_package_path': 'plotly-1.50.1.min.js',
         'external_url': (
@@ -106,7 +118,7 @@
         'namespace': 'dash_core_components',
         'dynamic': True
     },
-]
+])
 
 for _component in __all__:
     setattr(locals()[_component], '_js_dist', _js_dist)

src/components/DatePickerRange.react.js

@@ -1,10 +1,8 @@
-import 'react-dates/initialize';
-import {DateRangePicker} from 'react-dates';
 import PropTypes from 'prop-types';
-import React, {Component} from 'react';
-import uniqid from 'uniqid';
+import React, {Component, lazy, Suspense} from 'react';
+import LazyLoader from '../utils/LazyLoader';
 
-import convertToMoment from '../utils/convertToMoment';
+const RealDatePickerRange = lazy(LazyLoader.datePickerRange);
 
 /**
  * DatePickerRange is a tailor made component designed for selecting
@@ -18,176 +16,11 @@ import convertToMoment from '../utils/convertToMoment';
  * which can be found here: https://github.com/airbnb/react-dates
  */
 export default class DatePickerRange extends Component {
-    constructor(props) {
-        super(props);
-        this.propsToState = this.propsToState.bind(this);
-        this.onDatesChange = this.onDatesChange.bind(this);
-        this.isOutsideRange = this.isOutsideRange.bind(this);
-        this.state = {
-            focused: false,
-            start_date_id: props.start_date_id || uniqid(),
-            end_date_id: props.end_date_id || uniqid(),
-        };
-    }
-
-    propsToState(newProps) {
-        this.setState({
-            start_date: newProps.start_date,
-            end_date: newProps.end_date,
-        });
-    }
-
-    componentWillReceiveProps(newProps) {
-        this.propsToState(newProps);
-    }
-
-    componentWillMount() {
-        this.propsToState(this.props);
-    }
-
-    onDatesChange({startDate: start_date, endDate: end_date}) {
-        const {setProps, updatemode, clearable} = this.props;
-
-        const oldMomentDates = convertToMoment(this.state, [
-            'start_date',
-            'end_date',
-        ]);
-
-        if (start_date && !start_date.isSame(oldMomentDates.start_date)) {
-            if (updatemode === 'singledate') {
-                setProps({start_date: start_date.format('YYYY-MM-DD')});
-            } else {
-                this.setState({start_date: start_date.format('YYYY-MM-DD')});
-            }
-        }
-
-        if (end_date && !end_date.isSame(oldMomentDates.end_date)) {
-            if (updatemode === 'singledate') {
-                setProps({end_date: end_date.format('YYYY-MM-DD')});
-            } else if (updatemode === 'bothdates') {
-                setProps({
-                    start_date: this.state.start_date,
-                    end_date: end_date.format('YYYY-MM-DD'),
-                });
-            }
-        }
-
-        if (
-            clearable &&
-            !start_date &&
-            !end_date &&
-            (oldMomentDates.start_date !== start_date ||
-                oldMomentDates.end_date !== end_date)
-        ) {
-            setProps({start_date: null, end_date: null});
-        }
-    }
-
-    isOutsideRange(date) {
-        const {min_date_allowed, max_date_allowed} = this.props;
-
-        return (
-            (min_date_allowed && date.isBefore(min_date_allowed)) ||
-            (max_date_allowed && date.isAfter(max_date_allowed))
-        );
-    }
-
     render() {
-        const {focusedInput} = this.state;
-
-        const {
-            calendar_orientation,
-            clearable,
-            day_size,
-            disabled,
-            display_format,
-            end_date_placeholder_text,
-            first_day_of_week,
-            is_RTL,
-            minimum_nights,
-            month_format,
-            number_of_months_shown,
-            reopen_calendar_on_clear,
-            show_outside_days,
-            start_date_placeholder_text,
-            stay_open_on_select,
-            with_full_screen_portal,
-            with_portal,
-            loading_state,
-            id,
-            style,
-            className,
-            start_date_id,
-            end_date_id,
-        } = this.props;
-
-        const {initial_visible_month} = convertToMoment(this.props, [
-            'initial_visible_month',
-        ]);
-
-        const {start_date, end_date} = convertToMoment(this.state, [
-            'start_date',
-            'end_date',
-        ]);
-        const verticalFlag = calendar_orientation !== 'vertical';
-
-        const DatePickerWrapperStyles = {
-            position: 'relative',
-            display: 'inline-block',
-            ...style,
-        };
-
         return (
-            <div
-                id={id}
-                style={DatePickerWrapperStyles}
-                className={className}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-            >
-                <DateRangePicker
-                    daySize={day_size}
-                    disabled={disabled}
-                    displayFormat={display_format}
-                    enableOutsideDays={show_outside_days}
-                    endDate={end_date}
-                    endDatePlaceholderText={end_date_placeholder_text}
-                    firstDayOfWeek={first_day_of_week}
-                    focusedInput={focusedInput}
-                    initialVisibleMonth={() => {
-                        if (initial_visible_month) {
-                            return initial_visible_month;
-                        } else if (end_date && focusedInput === 'endDate') {
-                            return end_date;
-                        } else if (start_date && focusedInput === 'startDate') {
-                            return start_date;
-                        }
-                        return start_date;
-                    }}
-                    isOutsideRange={this.isOutsideRange}
-                    isRTL={is_RTL}
-                    keepOpenOnDateSelect={stay_open_on_select}
-                    minimumNights={minimum_nights}
-                    monthFormat={month_format}
-                    numberOfMonths={number_of_months_shown}
-                    onDatesChange={this.onDatesChange}
-                    onFocusChange={focusedInput =>
-                        this.setState({focusedInput})
-                    }
-                    orientation={calendar_orientation}
-                    reopenPickerOnClearDates={reopen_calendar_on_clear}
-                    showClearDates={clearable}
-                    startDate={start_date}
-                    startDatePlaceholderText={start_date_placeholder_text}
-                    withFullScreenPortal={
-                        with_full_screen_portal && verticalFlag
-                    }
-                    withPortal={with_portal && verticalFlag}
-                    startDateId={start_date_id || this.state.start_date_id}
-                    endDateId={end_date_id || this.state.end_date_id}
-                />
-            </div>
+            <Suspense fallback={null}>
+                <RealDatePickerRange {...this.props} />
+            </Suspense>
         );
     }
 }
@@ -446,3 +279,6 @@ DatePickerRange.defaultProps = {
     persisted_props: ['start_date', 'end_date'],
     persistence_type: 'local',
 };
+
+export const propTypes = DatePickerRange.propTypes;
+export const defaultProps = DatePickerRange.defaultProps;