Package detail

sd-material-ui

StratoDem110MIT3.1.0

material-ui components for Dash

readme

sd-material-ui

StratoDem Analytics Dash implementation of material-ui components.

Dash wrappers around the excellent material-ui package

Installation and usage

$ pip install sd-material-ui

import dash
import dash_html_components as html

import sd_material_ui

my_app = dash.Dash()

# A FlatButton on Paper
my_app.layout = sd_material_ui.Paper([
    html.Div(children=[
        html.P(id='output', children=['n_clicks value: . n_clicks_previous value: '])
    ]),

    sd_material_ui.FlatButton(id='input', label='Click me', backgroundColor='orange'),
])

# Callback for FlatButton
@app.callback(
    dash.dependencies.Output('output', 'children'),
    [dash.dependencies.Input('input', 'n_clicks')],
    [dash.dependencies.State('input', 'n_clicks_previous')])
def display_clicks_flat(n_clicks_flat: int, n_clicks_flat_prev: int):
    if n_clicks_flat:
        return ['n_clicks value: {}. n_clicks_prev value: {}'.format(n_clicks_flat,
                                                                     n_clicks_flat_prev)]
    else:
return ['n_clicks value: ']

if __name__ == '__main__':
    my_app.run_server()

Material-UI components ported to Dash

<input checked="" disabled="" type="checkbox"> AutoComplete
<input checked="" disabled="" type="checkbox"> BottomNavigation
<input checked="" disabled="" type="checkbox"> Checkbox
<input checked="" disabled="" type="checkbox"> CircularProgress
<input checked="" disabled="" type="checkbox"> Dialog
<input checked="" disabled="" type="checkbox"> Divider
<input checked="" disabled="" type="checkbox"> Drawer
<input checked="" disabled="" type="checkbox"> DropDownMenu
<input checked="" disabled="" type="checkbox"> FlatButton
<input checked="" disabled="" type="checkbox"> FontIcon
<input checked="" disabled="" type="checkbox"> IconButton
<input checked="" disabled="" type="checkbox"> Paper
<input checked="" disabled="" type="checkbox"> RaisedButton
<input checked="" disabled="" type="checkbox"> Snackbar
<input checked="" disabled="" type="checkbox"> Subheader
<input checked="" disabled="" type="checkbox"> Toggle

Examples

sd-material-ui examples

Dash

Go to this link to learn about Dash.

Dash help

See the dash-components-archetype repo for more information.

Contributing

To set up the development environment:

$ npm install
# Run webpack to create the Dash React bundle
$ npm run build-dist
# Set up a virtualenv
$ virtualenv venv -p python3
$ source venv/bin/activate
# Install the local Python Dash package
$ npm run install-local

Running a local server

Run usage.py in the virtual environment

$ source venv/bin/activate
$ python usage.py

Contributors

@mjclawar @coralvanda @SreejaKeesara

changelog

Change Log for sd-material-ui

All notable changes to this project will be documented in this file. This project adheres to Semantic Versioning.

3.1.0 2019-07-03

Changes

Internal: Upgrades package structure to newest dash-component-boilerplate

3.0.2 2018-03-15

Fixes

Fixes a problem where the open prop was not always correctly set for the Drawer component

3.0.1 2018-11-14

Adds

Adds additional documentation to the Dialog component regarding potentially confusing behavior

3.0.0 2018-11-05

Changes

Changes the Stepper component to uncontrolled, so callbacks are not needed for each Step. This changes BREAKS existing uses of the Stepper component

2.17.0 2018-10-31

Adds

Adds a Step component
Adds a Stepper component to control progress through Steps

2.16.4 2018-10-24

Fixes

Handles Snackbar opening more than once with no callback listening to the Snackbar (https://github.com/StratoDem/sd-material-ui/issues/85)

2.16.3 - 2018-09-07

Fixes

v2.16.2 did not have correct bundle published on npm

2.16.2 - 2018-09-07

Changes

Changes the Popover to allow an icon button option
Changes the Popover to allow styles for the button to be passed in using buttonStyle
Removes some unnecessary characters that were appearing after the button

Fixes

Fixes items similar to https://github.com/StratoDem/sd-material-ui/issues/79 in the following components:
- Dialog
- Drawer
- DropDownMenu
- RadioButtonGroup
- Snackbar
- Toggle

2.16.1 - 2018-09-05

Fixes

Fixes https://github.com/StratoDem/sd-material-ui/issues/79 where Checkbox callback was firing twice to the server on a click event

2.16.0 - 2018-08-30

Added

Adds Popover as an uncontrolled component which can render other components as children

2.15.0 - 2018-06-13

Added

Adds searchEndpointAPI prop to AutoComplete to allow for external searching https://github.com/StratoDem/sd-material-ui/issues/76

2.14.1 - 2018-06-10

Added

Adds QuestionTabs component for tabs version of Questions (internal)

2.14.0 - 2018-05-31

Added

Tabs, which takes mainly children and tabPropsArray. children and tabPropsArray must be Arrays of the same length, which are rendered as Tab components. This structure is necessary since Dash currently only passes along React components through the children prop, and using Tab directly was not rendering correctly. Any of the standard props from Tab can be passed along through tabPropsArray.

# Renders two tabs with the children lined up with the tabs props
import sd_material_ui

sd_material_ui.Tabs(
    children=[
        html.Div('Tab 1'),
        html.Div('Tab 2'),
    ],
    tabPropsArray=[
        {'label': 'Tab 1 label'},
        {'label': 'Tab 2 label'},
    ]
)

2.13.3 - 2018-05-22

Added

Adds Questions component for special use case

2.13.2 - 2018-05-18

Fixes

Updates prop names internally in Card from initialyExpanded to initiallyExpanded to fix syntax (spelling) error

2.13.1 - 2018-05-18

Fixes

Updates prop names internally in CardText for style and color to allow textColor and textStyle props to actually change CardText subcomponent

Added

Adds id and headerIconStyle props to CardComponent:
- id as a string to allow for callbacks assigned to the card
- headerIconStyle to allow for styling the icon in the CardHeader subcomponent

2.13.0 - 2018-05-17

Added

Adds uncontrolled Card component

2.12.0 - 2018-04-19

Changed

Adds functionality to AutoComplete component to allow for sending back value instead of searchText

Example

# SDAutoComplete with exactMatch
# This ships back 1 when the user types in 'magenta' exactly
# This ships back {'testKey': 'testVal'} when the user types in 'aqua' exactly
sd_material_ui.AutoComplete(
    id='input-autocomplete-exactmatch',
    anchorOrigin={'vertical': 'center', 'horizontal': 'middle'},
    animated=True,
    exactMatch=True,
    dashCallbackDelay=3000,
    dataSource=[
        dict(label='pink', value=0),
        dict(label='magenta', value=1),
        dict(label='aqua', value={'testKey': 'testVal'}),
        dict(label='aquamarine', value=3),
    ],
    fullWidth=True,
    floatingLabelText="Type here",
    filter='caseSensitiveFilter')

2.11.1 - 2018-04-19

Fixes

Updates metadata.json for new props in v2.11.0

2.11.0 - 2018-04-19

Added

Adds containerClosedClassName prop to Drawer which applies additional classes to the drawer when it is closed to allow for custom styling (like offsets or transitions)

Changed

:mega: BREAKING Changes containerclassName prop to containerClassName in Drawer to match material-ui prop naming format.

Example

# This has 'my-test-class my-closed-class' as the class name when closed
# and 'my-test-class' as the class name when open
sd_material_ui.Drawer(
    open=False,
    containerClassName='my-test-class',
    containerClosedClassName='my-closed-class')

Fixes

Adds id prop to FontIcon

2.10.1 - 2018-04-09

Fixes

Fixes package.json and version.py mismatch

2.10.0 - 2018-04-09

Added

Add Subheader Component

2.9.0 - 2018-04-09

Added

Add Paper Component

2.8.0 - 2018-04-09

Added

Add RadioButtonGroup Component

2.7.1 - 2018-03-26

Fixes

Fixes package.json and version.py mismatch

2.7.0 - 2018-03-26

Added

Add AutoComplete Component

2.6.1 - 2018-03-19

Fixes

Fixes versioning in package.json

2.6.0 - 2018-03-19

Added

Add FontIcon Component

Changed

change IconButton.react.js documentation to notify user that FontIcon cannot be passed as param

2.5.0 - 2018-03-15

Added

Add IconButton Component

Changed

Change usage.py test-buttons-together tests to include IconButton

2.4.0 - 2018-03-14

Added

Add CircularProgress Component

Changed

Change usage.py button test to avoid NoneType Error

2.3.1 - 2018-03-13

Fixes

Fixes versioning issue with version.py

2.3.0 - 2018-03-12

Added

Add Divider component

2.2.0 - 2018-02-27

Added

Add n_clicks_previous prop to Flat and Raised buttons
Add new tests in usage.py to demonstrate behavior of new prop

2.1.2 - 2018-02-22

Changed

Add id as a prop to DropDownMenu

2.1.1 - 2018-02-22

Changed

Updated README and added example

2.1.0 - 2018-02-22

Changed

Replaced all references to PropTypes in favor of Flow type hinting.

2.0.0 - 2018-01-26

Changed

Renamed components
Moved all components into their own directories in preparation for adding individual READMEs

1.7.5 - 2018-01-23

Changed

Removed null default for SDDropDownMenu's iconButton, allowing the arrow to appear by default

1.7.4 - 2018-01-19

Added

customData prop now available to menu items in SDDropDownMenu

1.7.3 - 2018-01-18

Changed

Allow a menu item's value to be any type of data, not just number

1.7.2 - 2018-01-17

Added

SDDropDownMenu

Changed

Versioning fix for 1.7.2 in deployment

1.6.1 - 2018-01-16

Changed

Make label a default prop on both flat and raised buttons

1.6.0 - 2018-01-12

Added

SDSnackbar

1.5.1 - 2018-01-11

Changed

Allow className on SDDialog component

1.5.0 - 2018-01-10

Added

SDToggle

Changed

SDCheckbox now sets state even without setProps or fireEvent defined

1.4.0 - 2018-01-09

Added

SDCheckbox

1.3.0 - 2018-01-02

Added

SDDrawer

Fixed

Dialog, now a pure component that can be controlled in Dash

1.2.1 - 2018-01-02

Added

SDRaisedButton

1.2.0 - 2017-12-29

Added

SDDialog
SDFlatButton

Fixed

Webpack config, no longer creating issues with 2 instances of React

1.0.0 - 2017-12-02

Added

BottomNavigation

0.0.1 - 2017-12-02

Initial release