Copyright 2018 Jared Boice (MIT License / Open Source)
Uptown-Dropdown - Summarized Documentation
get the full documentation at gitHub.
Donations - Bitcoin: 19XgiRojJnv9VDhyW9HmF6oKQeVc7k9McU
(use this address until 2022)
Description
Uptown-Dropdown is a fully customizable react dropdown implementation that doubles as an expander. It accepts a header component or a placeholder, an optional icon, and a single component for the expandable body which decouples the dropdown from a list. Uptown-Dropdown offers adjustable orientation, optional built-in animation, applied css class names for each state of the component, switches for disabling the component and externally toggling expand/collapse states, multiple trigger types including click and hover, the ability to pass custom props to custom components, and parameter injection of the expansion state to the click handler and to optional header/icon components as a key/value of props.
Select-Inject Integration: (click here to navigate to the select-inject npm page)
if you need a customizable react multi-select system, Uptown-Dropdown can be used with Select-Inject.
Install, Import & Instantiate
Install
npm install --save uptown-dropdown
Import
import UptownDropdown from 'uptown-dropdown';
Instantiation Example: Dropdown
render(){
const BodyComp = (props) => (
<div className="example-expander">
<div>{props.message}</div>
<div>stuff</div>
<div>stuff</div>
<div>stuff</div>
<div>stuff</div>
<div>stuff</div>
<div>stuff</div>
</div>
);
const IconComp = (props) => {
if (props.expanded) {
return <span>^</span>;
}
return <span>v</span>;
};
const bodyCompProps = { message: 'hello world' };
return (
<section>
<div>dude, that dropdown is so uptown</div>
<UptownDropdown
name="my-uptown-component"
uid={Symbol('uptown-dropdown-render-id')}
expanded={false} // track in your app's state as needed
placeholder="what is thy bidding?" // start with something simple like "select"
centerPlaceholder={true}
linkStyles={true}
anime={true}
flexBasis="200px"
maxWidth="600px"
border="1px solid dimgray"
borderRadius="3px"
BodyComp={BodyComp}
IconComp={IconComp}
bodyCompProps={bodyCompProps}
triggerType="clickAndHover"
/>
</section>
);
}
Instantiation Example: Expander
return (
<section>
<div>dude, that dropdown is so uptown</div>
<UptownDropdown
name="my-uptown-component"
uid={Symbol('uptown-dropdown-render-id')}
expanded={false} // track in your app's state as needed
placeholder="what is thy bidding?" // start with something simple like "select"
centerPlaceholder={true}
linkStyles={true}
anime={true}
calculateDimension={true} // required for built-in animation for componentType={expander}
flexBasis="200px"
maxWidth="600px"
border="1px solid dimgray"
borderRadius="3px"
BodyComp={BodyComp}
IconComp={IconComp}
bodyCompProps={bodyCompProps}
triggerType="click"
componentType="expander"
/>
</section>
);
}
Props
UptownDropdown.propTypes = {
name: PropTypes.string,
uid: PropTypes.oneOfType([PropTypes.symbol, PropTypes.string, PropTypes.number]),
expanded: PropTypes.bool,
disabled: PropTypes.bool,
placeholder: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
centerPlaceholder: PropTypes.bool,
linkStyles: PropTypes.bool,
customController: PropTypes.bool,
anime: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
orientation: PropTypes.string,
calculateDimension: PropTypes.bool,
maintainOpacityOnAnime: PropTypes.bool,
prependIcon: PropTypes.bool,
flexBasis: PropTypes.string,
minWidth: PropTypes.string,
minHeight: PropTypes.string,
maxWidth: PropTypes.string,
maxHeight: PropTypes.string,
border: PropTypes.string,
borderRadius: PropTypes.string, eg.
boxShadow: PropTypes.string,
hideHeader: PropTypes.bool,
HeaderComp: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
IconComp: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
BodyComp: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
headerCompProps: PropTypes.object,
iconCompProps: PropTypes.object,
bodyCompProps: PropTypes.object,
handleClick: PropTypes.func,
triggerType: PropTypes.string,
componentType: PropTypes.string,
mouseOutCollapseDelay: PropTypes.number
};
UptownDropdown.defaultProps = {
name: 'default-uptown-dropdown-name',
uid: null,
expanded: false,
disabled: false,
placeholder: 'select',
centerPlaceholder: false,
linkStyles: false,
customController: false,
anime: false,
orientation: VERTICAL,
calculateDimension: false,
maintainOpacityOnAnime: null,
prependIcon: false,
flexBasis: null,
minWidth: null,
minHeight: null,
maxWidth: null,
maxHeight: null,
border: null,
borderRadius: null,
boxShadow: null,
hideHeader: false,
HeaderComp: null,
IconComp: null,
headerCompProps: {},
iconCompProps: {},
bodyCompProps: {},
handleClick: (expanded) => {},
triggerType: CLICK,
componentType: DROPDOWN,
mouseOutCollapseDelay: MINIMUM_MOUSE_OUT_COLLAPSE_DELAY
};