ywana-core8 0.0.732 → 0.0.734

package/dist/index.cjs

@@ -756,7 +756,8 @@ var ListItem = function ListItem(_ref) {
     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
@@ -2479,6 +2480,71 @@ var ColorField = function ColorField(props) {
   }));
 };
 
+/**
+ * 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
  */
@@ -10898,6 +10964,7 @@ exports.Menu = Menu;
 exports.MenuIcon = MenuIcon;
 exports.MenuItem = MenuItem;
 exports.MenuSeparator = MenuSeparator;
+exports.MultiSelector = MultiSelector;
 exports.Page = Page;
 exports.PageContext = PageContext;
 exports.PageProvider = PageProvider;
@@ -10930,6 +10997,7 @@ exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextField = TextField;
 exports.Thumbnail = Thumbnail;
+exports.ToggleButton = ToggleButton;
 exports.TokenField = TokenField;
 exports.Tooltip = Tooltip;
 exports.Tree = Tree;