Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-dropdown-now
Advanced tools
react-dropdown-now - npm Package Compare versions
Comparing version 1.0.9 to 2.0.0
| "use strict"; | ||
| var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard"); | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -8,310 +12,165 @@ value: true | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); | ||
| var _react = _interopRequireWildcard(require("react")); | ||
| var _reactDom = _interopRequireDefault(require("react-dom")); | ||
| var _classnames = _interopRequireDefault(require("classnames")); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
| var _Menu = _interopRequireDefault(require("./components/Menu")); | ||
| function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
| var _Arrow = _interopRequireDefault(require("./components/Arrow")); | ||
| function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| var _useOutsideClick = require("./hooks/use-outside-click"); | ||
| function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
| var _helpers = require("./helpers"); | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| var _constants = require("./constants"); | ||
| function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); } | ||
| function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } | ||
| function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } | ||
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } | ||
| function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function Dropdown(_ref) { | ||
| var _classNames, _classNames2, _classNames3, _classNames4; | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| var placeholder = _ref.placeholder, | ||
| options = _ref.options, | ||
| value = _ref.value, | ||
| disabled = _ref.disabled, | ||
| onOpen = _ref.onOpen, | ||
| onClose = _ref.onClose, | ||
| onFocus = _ref.onFocus, | ||
| onChange = _ref.onChange, | ||
| baseClassName = _ref.baseClassName, | ||
| controlClassName = _ref.controlClassName, | ||
| placeholderClassName = _ref.placeholderClassName, | ||
| menuClassName = _ref.menuClassName, | ||
| arrowClassName = _ref.arrowClassName, | ||
| arrowClosed = _ref.arrowClosed, | ||
| arrowOpen = _ref.arrowOpen, | ||
| className = _ref.className, | ||
| noOptionsDisplay = _ref.noOptionsDisplay, | ||
| innerRef = _ref.innerRef; | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| var _useState = (0, _react.useState)((0, _helpers.parseOptionsValue)(options, value) || { | ||
| label: typeof placeholder === 'undefined' ? _constants.DEFAULT_PLACEHOLDER_STRING : placeholder, | ||
| value: '' | ||
| }), | ||
| _useState2 = (0, _slicedToArray2["default"])(_useState, 2), | ||
| selected = _useState2[0], | ||
| setSelected = _useState2[1]; | ||
| function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
| var _useState3 = (0, _react.useState)(false), | ||
| _useState4 = (0, _slicedToArray2["default"])(_useState3, 2), | ||
| isOpen = _useState4[0], | ||
| setIsOpen = _useState4[1]; | ||
| function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
| var dropdownNode = (0, _react.useRef)(); | ||
| function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
| var handleOpenStateEvents = function handleOpenStateEvents(dropdownIsOpen, closedBySelection) { | ||
| if (dropdownIsOpen && typeof onOpen === 'function') { | ||
| onOpen(); | ||
| } | ||
| function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
| function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } | ||
| function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
| var DEFAULT_PLACEHOLDER_STRING = 'Select...'; | ||
| var Dropdown = | ||
| /*#__PURE__*/ | ||
| function (_Component) { | ||
| _inherits(Dropdown, _Component); | ||
| function Dropdown(props) { | ||
| var _this; | ||
| _classCallCheck(this, Dropdown); | ||
| _this = _possibleConstructorReturn(this, _getPrototypeOf(Dropdown).call(this, props)); | ||
| _this.state = { | ||
| selected: _this.parseValue(props.value, props.options) || { | ||
| label: typeof props.placeholder === 'undefined' ? DEFAULT_PLACEHOLDER_STRING : props.placeholder, | ||
| value: '' | ||
| }, | ||
| isOpen: false | ||
| }; | ||
| _this.mounted = true; | ||
| _this.handleDocumentClick = _this.handleDocumentClick.bind(_assertThisInitialized(_this)); | ||
| _this.fireChangeEvent = _this.fireChangeEvent.bind(_assertThisInitialized(_this)); | ||
| _this.handleOpenStateEvents = _this.handleOpenStateEvents.bind(_assertThisInitialized(_this)); | ||
| return _this; | ||
| } | ||
| _createClass(Dropdown, [{ | ||
| key: "componentDidUpdate", | ||
| value: function componentDidUpdate(prevProps) { | ||
| if (this.props.value !== prevProps.value) { | ||
| if (this.props.value) { | ||
| var selected = this.parseValue(this.props.value, this.props.options); | ||
| if (selected !== this.state.selected) { | ||
| this.setState({ | ||
| selected: selected | ||
| }); | ||
| } | ||
| } else { | ||
| this.setState({ | ||
| selected: { | ||
| label: typeof this.props.placeholder === 'undefined' ? DEFAULT_PLACEHOLDER_STRING : this.props.placeholder, | ||
| value: '' | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| if (!dropdownIsOpen && typeof onClose === 'function') { | ||
| onClose(!!closedBySelection); | ||
| } | ||
| }, { | ||
| key: "componentDidMount", | ||
| value: function componentDidMount() { | ||
| document.addEventListener('click', this.handleDocumentClick, false); | ||
| document.addEventListener('touchend', this.handleDocumentClick, false); | ||
| } | ||
| }, { | ||
| key: "componentWillUnmount", | ||
| value: function componentWillUnmount() { | ||
| this.mounted = false; | ||
| document.removeEventListener('click', this.handleDocumentClick, false); | ||
| document.removeEventListener('touchend', this.handleDocumentClick, false); | ||
| } | ||
| }, { | ||
| key: "handleOpenStateEvents", | ||
| value: function handleOpenStateEvents(isOpen) { | ||
| if (isOpen && typeof this.props.onOpen === 'function') { | ||
| this.props.onOpen(); | ||
| } | ||
| }; | ||
| if (!isOpen && typeof this.props.onClose === 'function') { | ||
| this.props.onClose(); | ||
| (0, _useOutsideClick.useOutsideClick)({ | ||
| ref: dropdownNode, | ||
| handler: function handler() { | ||
| if (isOpen) { | ||
| setIsOpen(false); | ||
| handleOpenStateEvents(false); | ||
| } | ||
| } | ||
| }, { | ||
| key: "handleMouseDown", | ||
| value: function handleMouseDown(event) { | ||
| if (this.props.onFocus && typeof this.props.onFocus === 'function') { | ||
| this.props.onFocus(this.state.isOpen); | ||
| } | ||
| }); | ||
| if (event.type === 'mousedown' && event.button !== 0) return; | ||
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| if (!this.props.disabled) { | ||
| var isOpen = !this.state.isOpen; | ||
| this.setState({ | ||
| isOpen: isOpen | ||
| }); | ||
| this.handleOpenStateEvents(isOpen); | ||
| } | ||
| var handleMouseDown = function handleMouseDown(event) { | ||
| if (typeof onFocus === 'function') { | ||
| onFocus(isOpen); | ||
| } | ||
| }, { | ||
| key: "parseValue", | ||
| value: function parseValue(value, options) { | ||
| var option; | ||
| if (typeof value === 'string') { | ||
| for (var i = 0, num = options.length; i < num; i++) { | ||
| if (options[i].type === 'group') { | ||
| var match = options[i].items.filter(function (item) { | ||
| return item.value === value; | ||
| }); | ||
| if (event.type === 'mousedown' && event.button !== 0) return; | ||
| event.stopPropagation(); | ||
| event.preventDefault(); | ||
| if (match.length) { | ||
| var _match = _slicedToArray(match, 1); | ||
| option = _match[0]; | ||
| } | ||
| } else if (typeof options[i].value !== 'undefined' && options[i].value === value) { | ||
| option = options[i]; | ||
| } | ||
| } | ||
| } | ||
| return option || value; | ||
| if (!disabled) { | ||
| var newIsOpen = !isOpen; | ||
| setIsOpen(newIsOpen); | ||
| handleOpenStateEvents(newIsOpen); | ||
| } | ||
| }, { | ||
| key: "setValue", | ||
| value: function setValue(value, label) { | ||
| var newState = { | ||
| selected: { | ||
| value: value, | ||
| label: label | ||
| }, | ||
| isOpen: false | ||
| }; | ||
| this.fireChangeEvent(newState); | ||
| this.setState(newState); | ||
| this.handleOpenStateEvents(false); | ||
| } | ||
| }, { | ||
| key: "fireChangeEvent", | ||
| value: function fireChangeEvent(newState) { | ||
| if (newState.selected !== this.state.selected && this.props.onChange) { | ||
| this.props.onChange(newState.selected); | ||
| } | ||
| } | ||
| }, { | ||
| key: "renderOption", | ||
| value: function renderOption(option) { | ||
| var _classes; | ||
| }; | ||
| var value = option.value; | ||
| if (typeof value === 'undefined') { | ||
| value = option.label || option; | ||
| } | ||
| var label = option.label || option.value || option; | ||
| var isSelected = value === this.state.selected.value || value === this.state.selected; | ||
| var classes = (_classes = {}, _defineProperty(_classes, "".concat(this.props.baseClassName, "-option"), true), _defineProperty(_classes, option.className, !!option.className), _defineProperty(_classes, 'is-selected', isSelected), _classes); | ||
| var optionClass = (0, _classnames["default"])(classes); | ||
| return _react["default"].createElement("div", { | ||
| key: value, | ||
| className: optionClass, | ||
| onMouseDown: this.setValue.bind(this, value, label), | ||
| onClick: this.setValue.bind(this, value, label), | ||
| role: "option", | ||
| "aria-selected": isSelected ? 'true' : 'false' | ||
| }, label); | ||
| var fireChangeEvent = function fireChangeEvent(newSelectedState) { | ||
| if (newSelectedState !== selected && onChange) { | ||
| onChange(newSelectedState); | ||
| } | ||
| }, { | ||
| key: "buildMenu", | ||
| value: function buildMenu() { | ||
| var _this2 = this; | ||
| }; | ||
| var _this$props = this.props, | ||
| options = _this$props.options, | ||
| baseClassName = _this$props.baseClassName; | ||
| var ops = options.map(function (option) { | ||
| if (option.type === 'group') { | ||
| var groupTitle = _react["default"].createElement("div", { | ||
| className: "".concat(baseClassName, "-title") | ||
| }, option.name); | ||
| var setValue = function setValue(newValue, newLabel) { | ||
| var newSelectedState = (0, _helpers.parseOptionsValue)(options, newValue) || { | ||
| value: newValue, | ||
| label: newLabel | ||
| }; | ||
| fireChangeEvent(newSelectedState); | ||
| setSelected(newSelectedState); | ||
| setIsOpen(false); | ||
| handleOpenStateEvents(false, true); | ||
| }; | ||
| var tmpoptions = option.items.map(function (item) { | ||
| return _this2.renderOption(item); | ||
| }); | ||
| return _react["default"].createElement("div", { | ||
| className: "".concat(baseClassName, "-group"), | ||
| key: option.name, | ||
| role: "listbox", | ||
| tabIndex: "-1" | ||
| }, groupTitle, tmpoptions); | ||
| } | ||
| var isValueSelected = function isValueSelected() { | ||
| return Boolean(typeof selected === 'string' || selected.value !== ''); | ||
| }; | ||
| return _this2.renderOption(option); | ||
| }); | ||
| return ops.length ? ops : _react["default"].createElement("div", { | ||
| className: "".concat(baseClassName, "-noresults") | ||
| }, "No options found"); | ||
| } | ||
| }, { | ||
| key: "handleDocumentClick", | ||
| value: function handleDocumentClick(event) { | ||
| if (this.mounted) { | ||
| // eslint-disable-next-line react/no-find-dom-node | ||
| if (!_reactDom["default"].findDOMNode(this).contains(event.target)) { | ||
| if (this.state.isOpen) { | ||
| this.setState({ | ||
| isOpen: false | ||
| }); | ||
| this.handleOpenStateEvents(false); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, { | ||
| key: "isValueSelected", | ||
| value: function isValueSelected() { | ||
| var selected = this.state.selected; | ||
| return Boolean(typeof selected === 'string' || selected.value !== ''); | ||
| } | ||
| }, { | ||
| key: "render", | ||
| value: function render() { | ||
| var _classNames, _classNames2, _classNames3, _classNames4, _classNames5; | ||
| var disabledClass = disabled ? "".concat(baseClassName, "-disabled") : ''; | ||
| var placeHolderValue = typeof selected === 'string' ? selected : selected.label; | ||
| var dropdownClass = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(baseClassName, "-root"), true), (0, _defineProperty2["default"])(_classNames, className, !!className), (0, _defineProperty2["default"])(_classNames, 'is-open', isOpen), _classNames)); | ||
| var controlClass = (0, _classnames["default"])((_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(baseClassName, "-control"), true), (0, _defineProperty2["default"])(_classNames2, controlClassName, !!controlClassName), (0, _defineProperty2["default"])(_classNames2, disabledClass, !!disabledClass), _classNames2)); | ||
| var placeholderClass = (0, _classnames["default"])((_classNames3 = {}, (0, _defineProperty2["default"])(_classNames3, "".concat(baseClassName, "-placeholder"), true), (0, _defineProperty2["default"])(_classNames3, placeholderClassName, !!placeholderClassName), (0, _defineProperty2["default"])(_classNames3, 'is-selected', isValueSelected()), _classNames3)); | ||
| var menuClass = (0, _classnames["default"])((_classNames4 = {}, (0, _defineProperty2["default"])(_classNames4, "".concat(baseClassName, "-menu"), true), (0, _defineProperty2["default"])(_classNames4, menuClassName, !!menuClassName), _classNames4)); | ||
| var _this$props2 = this.props, | ||
| baseClassName = _this$props2.baseClassName, | ||
| controlClassName = _this$props2.controlClassName, | ||
| placeholderClassName = _this$props2.placeholderClassName, | ||
| menuClassName = _this$props2.menuClassName, | ||
| arrowClassName = _this$props2.arrowClassName, | ||
| arrowClosed = _this$props2.arrowClosed, | ||
| arrowOpen = _this$props2.arrowOpen, | ||
| className = _this$props2.className; | ||
| var disabledClass = this.props.disabled ? 'Dropdown-disabled' : ''; | ||
| var placeHolderValue = typeof this.state.selected === 'string' ? this.state.selected : this.state.selected.label; | ||
| var dropdownClass = (0, _classnames["default"])((_classNames = {}, _defineProperty(_classNames, "".concat(baseClassName, "-root"), true), _defineProperty(_classNames, className, !!className), _defineProperty(_classNames, 'is-open', this.state.isOpen), _classNames)); | ||
| var controlClass = (0, _classnames["default"])((_classNames2 = {}, _defineProperty(_classNames2, "".concat(baseClassName, "-control"), true), _defineProperty(_classNames2, controlClassName, !!controlClassName), _defineProperty(_classNames2, disabledClass, !!disabledClass), _classNames2)); | ||
| var placeholderClass = (0, _classnames["default"])((_classNames3 = {}, _defineProperty(_classNames3, "".concat(baseClassName, "-placeholder"), true), _defineProperty(_classNames3, placeholderClassName, !!placeholderClassName), _defineProperty(_classNames3, 'is-selected', this.isValueSelected()), _classNames3)); | ||
| var menuClass = (0, _classnames["default"])((_classNames4 = {}, _defineProperty(_classNames4, "".concat(baseClassName, "-menu"), true), _defineProperty(_classNames4, menuClassName, !!menuClassName), _classNames4)); | ||
| var arrowClass = (0, _classnames["default"])((_classNames5 = {}, _defineProperty(_classNames5, "".concat(baseClassName, "-arrow"), true), _defineProperty(_classNames5, arrowClassName, !!arrowClassName), _classNames5)); | ||
| var valueDisplay = /*#__PURE__*/_react["default"].createElement("div", { | ||
| className: placeholderClass | ||
| }, placeHolderValue); | ||
| var value = _react["default"].createElement("div", { | ||
| className: placeholderClass | ||
| }, placeHolderValue); | ||
| var menu = this.state.isOpen ? _react["default"].createElement("div", { | ||
| className: menuClass, | ||
| "aria-expanded": "true" | ||
| }, this.buildMenu()) : null; | ||
| return _react["default"].createElement("div", { | ||
| className: dropdownClass | ||
| }, _react["default"].createElement("div", { | ||
| className: controlClass, | ||
| onMouseDown: this.handleMouseDown.bind(this), | ||
| onTouchEnd: this.handleMouseDown.bind(this), | ||
| "aria-haspopup": "listbox" | ||
| }, value, _react["default"].createElement("div", { | ||
| className: "".concat(baseClassName, "-arrow-wrapper") | ||
| }, arrowOpen && arrowClosed ? this.state.isOpen ? arrowOpen : arrowClosed : _react["default"].createElement("span", { | ||
| className: arrowClass | ||
| }))), menu); | ||
| var menu = isOpen ? /*#__PURE__*/_react["default"].createElement("div", { | ||
| className: menuClass, | ||
| "aria-expanded": "true" | ||
| }, /*#__PURE__*/_react["default"].createElement(_Menu["default"], { | ||
| selected: selected, | ||
| options: options, | ||
| baseClassName: baseClassName, | ||
| noOptionsDisplay: noOptionsDisplay, | ||
| onSelect: function onSelect(e, selectedValue, label) { | ||
| return setValue(selectedValue, label); | ||
| } | ||
| }]); | ||
| })) : null; | ||
| return /*#__PURE__*/_react["default"].createElement("div", { | ||
| className: dropdownClass, | ||
| ref: dropdownNode | ||
| }, /*#__PURE__*/_react["default"].createElement("div", { | ||
| role: "presentation", | ||
| ref: innerRef, | ||
| className: controlClass, | ||
| onMouseDown: handleMouseDown, | ||
| onTouchEnd: handleMouseDown, | ||
| "aria-haspopup": "listbox" | ||
| }, valueDisplay, /*#__PURE__*/_react["default"].createElement(_Arrow["default"], { | ||
| isOpen: isOpen, | ||
| baseClassName: baseClassName, | ||
| arrowClassName: arrowClassName, | ||
| arrowClosed: arrowClosed, | ||
| arrowOpen: arrowOpen | ||
| })), menu); | ||
| } | ||
| return Dropdown; | ||
| }(_react.Component); | ||
| Dropdown.defaultProps = { | ||
| baseClassName: 'Dropdown', | ||
| Dropdown.defaultProps = _objectSpread({}, _constants.BASE_DEFAULT_PROPS, { | ||
| onOpen: function onOpen() {}, | ||
| onClose: function onClose() {} | ||
| }; | ||
| }); | ||
| var _default = Dropdown; | ||
| exports["default"] = _default; |
| "use strict"; | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
@@ -12,5 +14,11 @@ value: true | ||
| }); | ||
| Object.defineProperty(exports, "Selection", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Selection["default"]; | ||
| } | ||
| }); | ||
| var _Dropdown = _interopRequireDefault(require("./Dropdown")); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
| var _Selection = _interopRequireDefault(require("./Selection")); |
@@ -5,2 +5,3 @@ declare module 'react-dropdown-now' { | ||
| label: React.ReactNode; | ||
| view: React.ReactNode; | ||
| value: string; | ||
@@ -14,2 +15,5 @@ className?: string; | ||
| } | ||
| type StringOrReactNode = string | React.ReactNode; | ||
| export interface ReactDropdownProps { | ||
@@ -23,2 +27,3 @@ options: (Group | Option | string)[]; | ||
| arrowClassName?: string; | ||
| noOptionsDisplay?: StringOrReactNode; | ||
| disabled?: boolean; | ||
@@ -30,7 +35,18 @@ arrowClosed?: React.ReactNode; | ||
| onOpen?: () => void; | ||
| onClose?: () => void; | ||
| onClose?: (closedBySelection: boolean) => void; | ||
| value?: Option | string; | ||
| placeholder?: String; | ||
| innerRef: React.Ref; | ||
| } | ||
| export interface SelectionProps { | ||
| disabled?: boolean; | ||
| value?: Option | string; | ||
| options: (Group | Option | string)[]; | ||
| onChange?: (arg: Option) => void; | ||
| className?: string; | ||
| baseClassName?: string; | ||
| noOptionsDisplay?: StringOrReactNode; | ||
| } | ||
| class ReactDropdown extends React.Component<ReactDropdownProps> {} | ||
@@ -37,0 +53,0 @@ |
| { | ||
| "name": "react-dropdown-now", | ||
| "version": "1.0.9", | ||
| "version": "2.0.0", | ||
| "description": "React dropdown component NOW", | ||
@@ -48,31 +48,37 @@ "main": "dist/index.js", | ||
| "devDependencies": { | ||
| "@babel/cli": "7.7.7", | ||
| "@babel/core": "^7.3.4", | ||
| "@babel/plugin-proposal-class-properties": "^7.4.4", | ||
| "@babel/plugin-proposal-object-rest-spread": "^7.3.4", | ||
| "@babel/plugin-syntax-dynamic-import": "^7.2.0", | ||
| "@babel/plugin-transform-destructuring": "^7.3.2", | ||
| "@babel/plugin-transform-runtime": "^7.4.0", | ||
| "@babel/polyfill": "^7.2.5", | ||
| "@babel/preset-env": "^7.4.1", | ||
| "@babel/preset-react": "^7.0.0", | ||
| "@babel/register": "^7.4.0", | ||
| "babel-eslint": "^10.0.3", | ||
| "@babel/cli": "7.8.4", | ||
| "@babel/core": "^7.9.0", | ||
| "@babel/plugin-proposal-class-properties": "^7.8.3", | ||
| "@babel/plugin-proposal-object-rest-spread": "^7.9.5", | ||
| "@babel/plugin-syntax-dynamic-import": "^7.8.3", | ||
| "@babel/plugin-transform-destructuring": "^7.9.5", | ||
| "@babel/plugin-transform-runtime": "^7.9.0", | ||
| "@babel/polyfill": "^7.8.7", | ||
| "@babel/preset-env": "^7.9.5", | ||
| "@babel/preset-react": "^7.9.4", | ||
| "@babel/register": "^7.9.0", | ||
| "@commitlint/cli": "^8.3.5", | ||
| "@commitlint/config-conventional": "^8.3.4", | ||
| "ava": "^3.7.0", | ||
| "babel-eslint": "^10.1.0", | ||
| "babelify": "^10.0.0", | ||
| "browserify": "^16.5.0", | ||
| "browser-env": "^3.3.0", | ||
| "browserify": "^16.5.1", | ||
| "browserify-hmr": "^0.4.1", | ||
| "eslint": "^6.6.0", | ||
| "eslint-config-airbnb-base": "^14.0.0", | ||
| "eslint-plugin-import": "^2.14.0", | ||
| "eslint-plugin-react": "^7.14.3", | ||
| "eslint-plugin-react-hooks": "^2.1.1", | ||
| "react": "^16.12.0", | ||
| "react-dom": "^16.12.0", | ||
| "sinon": "^8.0.1", | ||
| "enzyme": "^3.11.0", | ||
| "enzyme-adapter-react-16": "^1.15.2", | ||
| "eslint": "^6.8.0", | ||
| "eslint-config-airbnb": "^18.1.0", | ||
| "eslint-config-prettier": "^6.10.1", | ||
| "eslint-plugin-import": "^2.20.2", | ||
| "eslint-plugin-jsx-a11y": "^6.2.3", | ||
| "eslint-plugin-react": "^7.19.0", | ||
| "eslint-plugin-react-hooks": "^3.0.0", | ||
| "express": "^4.17.1", | ||
| "husky": "^4.2.5", | ||
| "react": "^16.13.1", | ||
| "react-dom": "^16.13.1", | ||
| "sinon": "^9.0.2", | ||
| "watchify": "^3.11.1", | ||
| "express": "^4.17.0", | ||
| "ava": "^2.4.0", | ||
| "browser-env": "^3.3.0", | ||
| "enzyme": "^3.11.0", | ||
| "enzyme-adapter-react-16": "^1.15.2" | ||
| "yargs": "^15.3.1" | ||
| }, | ||
@@ -85,5 +91,7 @@ "typings": "./index.d.ts", | ||
| "browserify": "./node_modules/browserify/bin/cmd.js docs/main.js -o docs/bundle.js", | ||
| "lint": "eslint src", | ||
| "lint:fix": "eslint src --fix", | ||
| "test": "npm run lint && NODE_ENV=test ava --verbose", | ||
| "lint": "eslint src test", | ||
| "lint:fix": "eslint src test --fix", | ||
| "lint:commits": "commitlint --from origin/develop --to HEAD", | ||
| "unit-test": "NODE_ENV=test ava --verbose", | ||
| "test": "npm run lint && npm run unit-test", | ||
| "prepublishOnly": "npm run build", | ||
@@ -102,3 +110,8 @@ "publish": "git push origin --tags && git push origin", | ||
| ] | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" | ||
| } | ||
| } | ||
| } |
@@ -5,18 +5,30 @@ # react-dropdown-now | ||
| [![Downloads][downloads-image]][downloads-url] | ||
| ![Build Status][build-image] | ||
| [![Build Status][build-image]][repo-url] | ||
| The [demo page is here.][1] react-dropdown-now is a [fork of react-dropdown.][0] | ||
| > requires React >= 16.8 | ||
| ```Javascript | ||
| import Dropdown from 'react-dropdown-now'; | ||
| import Dropdown, { Selection } from 'react-dropdown-now'; | ||
| import 'react-dropdown-now/style.css'; | ||
| const options = ['one', 'two', 'three']; | ||
| const defaultOption = options[0]; | ||
| // normal usage | ||
| <Dropdown | ||
| placeholder="Select an option" | ||
| options={['one', 'two', 'three']} | ||
| value="one" | ||
| onChange={(value) => console.log('change!', value)} | ||
| onClose={(closedBySelection) => console.log('closedBySelection?:', closedBySelection)} | ||
| onOpen={() => console.log('open!')} | ||
| />; | ||
| <Dropdown | ||
| options={options} | ||
| onChange={this._onSelect} | ||
| value={defaultOption} | ||
| placeholder="Select an option" />; | ||
| // use the Selection component with other components like popovers etc. | ||
| <Selection | ||
| options={['one', 'two', 'three']} | ||
| value="one" | ||
| onChange={(value) => console.log('change!', value)} | ||
| />; | ||
| ``` | ||
@@ -36,3 +48,3 @@ | ||
| const options = [ | ||
| { value: 'one', label: 'One' }, | ||
| { value: 'one', label: 'One', view: <span>One</span> }, | ||
| { value: 'two', label: 'Two', className: 'myOptionClassName' }, | ||
@@ -54,4 +66,7 @@ { | ||
| When using Object options you can add to each option a className string to further customize the dropdown, e.g. adding icons to options | ||
| When using Object options you can add to each option: | ||
| - a `className` string to further customize the dropdown, e.g. adding icons to options | ||
| - a `view` node to render an isolated view in the dropdown options list which is different from what could be seen in the dropdown control (selected value) | ||
| **Disabled** | ||
@@ -67,42 +82,14 @@ | ||
| **className** | ||
| #### Styling with classnames | ||
| The `className` prop is passed down to the wrapper `div`, which also has the `Dropdown-root` class. | ||
| | Classname | Targets | | ||
| | :-------------------------------------------------------- | :--------------------------------------------------------- | | ||
| | `Dropdown-root` <br/> prop: `className` | main wrapper div | | ||
| | `Dropdown-control` <br/> prop: `controlClassName` | the dropdown control | | ||
| | `Dropdown-placeholder` <br/> prop: `placeholderClassName` | styles the placeholder / selected item in dropdown control | | ||
| | `Dropdown-menu` <br/> prop: `menuClassName` | container for the dropdown options | | ||
| | `Dropdown-arrow` <br/> prop: `arrowClassName` | dropdown arrow indicator | | ||
| ```JavaScript | ||
| <Dropdown className='myClassName' />; | ||
| ``` | ||
| #### Using custom arrows | ||
| **controlClassName** | ||
| The `controlClassName` prop is passed down to the control `div`, which also has the `Dropdown-control` class. | ||
| ```JavaScript | ||
| <Dropdown controlClassName='myControlClassName' />; | ||
| ``` | ||
| **placeholderClassName** | ||
| The `placeholderClassName` prop is passed down to the placeholder `div`, which also has the `Dropdown-placeholder` class. | ||
| ```JavaScript | ||
| <Dropdown placeholderClassName='myPlaceholderClassName' />; | ||
| ``` | ||
| **menuClassName** | ||
| The `menuClassName` prop is passed down to the menu `div` (the one that opens and closes and holds the options), which also has the `Dropdown-menu` class. | ||
| ```JavaScript | ||
| <Dropdown menuClassName='myMenuClassName' />; | ||
| ``` | ||
| **arrowClassName** | ||
| The `arrowClassName` prop is passed down to the arrow `span` , which also has the `Dropdown-arrow` class. | ||
| ```JavaScript | ||
| <Dropdown arrowClassName='myArrowClassName' />; | ||
| ``` | ||
| **arrowClosed**, **arrowOpen** | ||
@@ -118,12 +105,2 @@ | ||
| **onClose**, **onOpen** | ||
| The `onClose` & `onOpen` props enable actions to be taken when the dropdown either opens/closes | ||
| ```JavaScript | ||
| <Dropdown | ||
| onClose={() => { /** do something **/ }} | ||
| onOpen={() => { /** do something **/ }} />; | ||
| ``` | ||
| More [examples in the docs folder.][2] | ||
@@ -150,1 +127,2 @@ | ||
| [build-image]: https://github.com/iambumblehead/react-dropdown-now/workflows/test-component/badge.svg | ||
| [repo-url]: https://github.com/iambumblehead/react-dropdown-now |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by51.52%
39619
- Number of package files
- increased by128.57%
16
- Lines of code
- increased by70.22%
686
Worsened metrics
- Dev dependency count
- increased by20.69%
35
- Number of lines in readme file
- decreased by-15.17%
123
- Number of medium supply chain risk alerts
- increased by100%
2
No dependency changes