ywana-core8 0.0.136 → 0.0.140

package/dist/index.cjs

@@ -924,7 +924,9 @@ var DropDown = function DropDown(props) {
       _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],
@@ -934,6 +936,10 @@ var DropDown = function DropDown(props) {
       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) {
@@ -943,6 +949,16 @@ var DropDown = function DropDown(props) {
     }
   }, [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({
@@ -965,24 +981,40 @@ var DropDown = function DropDown(props) {
     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) {
@@ -2945,7 +2977,8 @@ var StringEditor = function StringEditor(_ref6) {
     value: value,
     onChange: change,
     options: buildOptions(),
-    readOnly: !editable
+    readOnly: !editable,
+    canFilter: true
   }) : /*#__PURE__*/React__default["default"].createElement(TextField, {
     outlined: outlined,
     id: id,