Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix issue #192 #196

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix issue #192 #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
61c550a
Remove deprecated function
HarryHenryGebel Aug 18, 2020
0f88c4b
Update due to request from build script
HarryHenryGebel Aug 18, 2020
a61c9af
Build changes
HarryHenryGebel Aug 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 23 additions & 39 deletions dist/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return

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; }

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); }
function _typeof(obj) { "@babel/helpers - typeof"; 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); }

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; }

Expand All @@ -27,29 +27,33 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(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 _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var DEFAULT_PLACEHOLDER_STRING = 'Select...';

var Dropdown =
/*#__PURE__*/
function (_Component) {
var Dropdown = /*#__PURE__*/function (_Component) {
_inherits(Dropdown, _Component);

var _super = _createSuper(Dropdown);

function Dropdown(props) {
var _this;

_classCallCheck(this, Dropdown);

_this = _possibleConstructorReturn(this, _getPrototypeOf(Dropdown).call(this, props));
_this = _super.call(this, props);
_this.state = {
selected: _this.parseValue(props.value, props.options) || {
label: typeof props.placeholder === 'undefined' ? DEFAULT_PLACEHOLDER_STRING : props.placeholder,
Expand All @@ -64,26 +68,6 @@ function (_Component) {
}

_createClass(Dropdown, [{
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(newProps) {
if (newProps.value) {
var selected = this.parseValue(newProps.value, newProps.options);

if (selected !== this.state.selected) {
this.setState({
selected: selected
});
}
} else {
this.setState({
selected: {
label: typeof newProps.placeholder === 'undefined' ? DEFAULT_PLACEHOLDER_STRING : newProps.placeholder,
value: ''
}
});
}
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
document.addEventListener('click', this.handleDocumentClick, false);
Expand Down Expand Up @@ -171,7 +155,7 @@ function (_Component) {
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", {
return /*#__PURE__*/_react["default"].createElement("div", {
key: value,
className: optionClass,
onMouseDown: this.setValue.bind(this, value, label),
Expand All @@ -190,15 +174,15 @@ function (_Component) {
baseClassName = _this$props.baseClassName;
var ops = options.map(function (option) {
if (option.type === 'group') {
var groupTitle = _react["default"].createElement("div", {
var groupTitle = /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(baseClassName, "-title")
}, option.name);

var _options = option.items.map(function (item) {
return _this2.renderOption(item);
});

return _react["default"].createElement("div", {
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(baseClassName, "-group"),
key: option.name,
role: "listbox",
Expand All @@ -208,7 +192,7 @@ function (_Component) {
return _this2.renderOption(option);
}
});
return ops.length ? ops : _react["default"].createElement("div", {
return ops.length ? ops : /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(baseClassName, "-noresults")
}, "No options found");
}
Expand Down Expand Up @@ -252,24 +236,24 @@ function (_Component) {
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 value = _react["default"].createElement("div", {
var value = /*#__PURE__*/_react["default"].createElement("div", {
className: placeholderClass
}, placeHolderValue);

var menu = this.state.isOpen ? _react["default"].createElement("div", {
var menu = this.state.isOpen ? /*#__PURE__*/_react["default"].createElement("div", {
className: menuClass,
"aria-expanded": "true"
}, this.buildMenu()) : null;
return _react["default"].createElement("div", {
return /*#__PURE__*/_react["default"].createElement("div", {
className: dropdownClass
}, _react["default"].createElement("div", {
}, /*#__PURE__*/_react["default"].createElement("div", {
className: controlClass,
onMouseDown: this.handleMouseDown.bind(this),
onTouchEnd: this.handleMouseDown.bind(this),
"aria-haspopup": "listbox"
}, value, _react["default"].createElement("div", {
}, value, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(baseClassName, "-arrow-wrapper")
}, arrowOpen && arrowClosed ? this.state.isOpen ? arrowOpen : arrowClosed : _react["default"].createElement("span", {
}, arrowOpen && arrowClosed ? this.state.isOpen ? arrowOpen : arrowClosed : /*#__PURE__*/_react["default"].createElement("span", {
className: arrowClass
}))), menu);
}
Expand Down
14 changes: 0 additions & 14 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,6 @@ class Dropdown extends Component {
this.fireChangeEvent = this.fireChangeEvent.bind(this)
}

componentWillReceiveProps (newProps) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is still needed if the value gets changed outside of the component itself.

See we have an app like this:

<Parent>
  <Child value={value} updateValue={updateValue}/>
  <Dropdown value={value}/>
</Parent>

If <Child> updates the value, the Dropdown will also need to know when the value gets updated outside.

if (newProps.value) {
var selected = this.parseValue(newProps.value, newProps.options)
if (selected !== this.state.selected) {
this.setState({selected: selected})
}
} else {
this.setState({selected: {
label: typeof newProps.placeholder === 'undefined' ? DEFAULT_PLACEHOLDER_STRING : newProps.placeholder,
value: ''
}})
}
}

componentDidMount () {
document.addEventListener('click', this.handleDocumentClick, false)
document.addEventListener('touchend', this.handleDocumentClick, false)
Expand Down
Loading