ywana-core8 0.0.732 → 0.0.734

package/dist/index.umd.js

@@ -750,7 +750,8 @@
         if (onSelect) onSelect(id);
       }
 
-      var style = selected === id ? "selected" : "";
+      var isSelected = Array.isArray(selected) ? selected.includes(id) : selected === id;
+      var style = isSelected ? "selected" : "";
       return /*#__PURE__*/React__default["default"].createElement("li", {
         className: "" + style,
         onClick: select
@@ -2473,6 +2474,71 @@
       }));
     };
 
+    /**
+     * Multi Selector
+     */
+
+    var MultiSelector = function MultiSelector(props) {
+      var _props$options = props.options,
+          options = _props$options === void 0 ? [] : _props$options,
+          className = props.className;
+
+      var _useState = React.useState([]),
+          selections = _useState[0],
+          setSelections = _useState[1];
+
+      React.useEffect(function () {
+        var initialSelections = options.filter(function (option) {
+          return option.selected === true;
+        }).map(function (option) {
+          return option.value;
+        });
+        setSelections(initialSelections);
+      }, []);
+
+      function toggleSelection(value) {
+        var onChange = props.onChange;
+        var next = selections.includes(value) ? selections.filter(function (item) {
+          return item != value;
+        }) : selections.concat([value]);
+        setSelections(next);
+        if (onChange) onChange(next);
+      }
+
+      var items = options.map(function (option) {
+        return _extends({}, option, {
+          selected: selections.includes(option.value),
+          onToggle: toggleSelection
+        });
+      });
+      return /*#__PURE__*/React__default["default"].createElement("ul", {
+        className: "multiselector " + className
+      }, items.map(function (option) {
+        return /*#__PURE__*/React__default["default"].createElement(ToggleButton, option);
+      }));
+    };
+    /**
+     * Toggle Button
+     */
+
+    var ToggleButton = function ToggleButton(props) {
+      var label = props.label,
+          value = props.value,
+          _props$selected = props.selected,
+          selected = _props$selected === void 0 ? false : _props$selected,
+          onToggle = props.onToggle;
+
+      function toggle() {
+        if (onToggle) onToggle(value);
+      }
+
+      var selectedStyle = selected ? 'selected' : '';
+      return /*#__PURE__*/React__default["default"].createElement("li", {
+        className: selectedStyle + " " + value,
+        onClick: toggle
+      }, label);
+    };
+
     /**
      * Login Box
      */
@@ -10892,6 +10958,7 @@
     exports.MenuIcon = MenuIcon;
     exports.MenuItem = MenuItem;
     exports.MenuSeparator = MenuSeparator;
+    exports.MultiSelector = MultiSelector;
     exports.Page = Page;
     exports.PageContext = PageContext;
     exports.PageProvider = PageProvider;
@@ -10924,6 +10991,7 @@
     exports.TextArea = TextArea;
     exports.TextField = TextField;
     exports.Thumbnail = Thumbnail;
+    exports.ToggleButton = ToggleButton;
     exports.TokenField = TokenField;
     exports.Tooltip = Tooltip;
     exports.Tree = Tree;