ywana-core8 0.0.136 → 0.0.140

package/dist/index.umd.js

@@ -921,7 +921,9 @@
         _props$options = props.options,
         options = _props$options === void 0 ? [] : _props$options,
         value = props.value,
-        onChange = props.onChange;
+        onChange = props.onChange,
+        _props$canFilter = props.canFilter,
+        canFilter = _props$canFilter === void 0 ? false : _props$canFilter;
 
     var _useState = React.useState(false),
         open = _useState[0],
@@ -931,6 +933,10 @@
         label = _useState2[0],
         setLabel = _useState2[1];
 
+    var _useState3 = React.useState(),
+        filter = _useState3[0],
+        setFilter = _useState3[1];
+
     React.useEffect(function () {
       if (Array.isArray(options)) {
         var option = options.find(function (option) {
@@ -940,6 +946,16 @@
       }
     }, [value]);
 
+    function change(id, value) {
+      console.log('dropdown change > canFilter:', canFilter, id, value);
+
+      if (canFilter) {
+        setFilter(value);
+      } else {
+        if (onChange) onChange(id, value);
+      }
+    }
+
     function toggle() {
       if (site) {
         site.changeFocus({
@@ -962,24 +978,40 @@
       setOpen(false);
     }
 
+    function renderOptions() {
+      var canShow = open == true && Array.isArray(options);
+
+      if (canShow) {
+        var filterActive = canFilter && label && label.length > 0;
+        var items = filterActive ? options.filter(function (option) {
+          return canFilter === false || filter.toUpperCase().indexOf(option.label.toUpperCase()) >= 0;
+        }) : options;
+        var lis = items.map(function (option) {
+          return /*#__PURE__*/React__default["default"].createElement("li", {
+            key: option.value,
+            value: option.value
+          }, option.label);
+        });
+        return /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement("ul", {
+          onClick: select
+        }, lis));
+      } else {
+        return null;
+      }
+    }
+
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "dropdown"
     }, /*#__PURE__*/React__default["default"].createElement(TextField, _extends({}, props, {
       onClick: toggle,
-      value: label
+      value: label,
+      onChange: change
     })), /*#__PURE__*/React__default["default"].createElement(Icon, {
       icon: "expand_more",
       clickable: true,
       size: "small",
       action: toggle
-    }), open == true ? /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement("ul", {
-      onClick: select
-    }, Array.isArray(options) ? options.map(function (option) {
-      return /*#__PURE__*/React__default["default"].createElement("li", {
-        key: option.value,
-        value: option.value
-      }, option.label);
-    }) : null)) : null);
+    }), renderOptions());
   };
 
   var isFunction$1 = function isFunction(value) {
@@ -2942,7 +2974,8 @@
       value: value,
       onChange: change,
       options: buildOptions(),
-      readOnly: !editable
+      readOnly: !editable,
+      canFilter: true
     }) : /*#__PURE__*/React__default["default"].createElement(TextField, {
       outlined: outlined,
       id: id,