ywana-core8 0.0.731 → 0.0.733
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +67 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +21 -0
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +66 -1
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +67 -0
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/html/index.js +2 -1
- package/src/html/selector.js +1 -1
package/dist/index.cjs
CHANGED
@@ -2479,6 +2479,71 @@ var ColorField = function ColorField(props) {
|
|
2479
2479
|
}));
|
2480
2480
|
};
|
2481
2481
|
|
2482
|
+
/**
|
2483
|
+
* Multi Selector
|
2484
|
+
*/
|
2485
|
+
|
2486
|
+
var MultiSelector = function MultiSelector(props) {
|
2487
|
+
var _props$options = props.options,
|
2488
|
+
options = _props$options === void 0 ? [] : _props$options,
|
2489
|
+
className = props.className;
|
2490
|
+
|
2491
|
+
var _useState = React.useState([]),
|
2492
|
+
selections = _useState[0],
|
2493
|
+
setSelections = _useState[1];
|
2494
|
+
|
2495
|
+
React.useEffect(function () {
|
2496
|
+
var initialSelections = options.filter(function (option) {
|
2497
|
+
return option.selected === true;
|
2498
|
+
}).map(function (option) {
|
2499
|
+
return option.value;
|
2500
|
+
});
|
2501
|
+
setSelections(initialSelections);
|
2502
|
+
}, []);
|
2503
|
+
|
2504
|
+
function toggleSelection(value) {
|
2505
|
+
var onChange = props.onChange;
|
2506
|
+
var next = selections.includes(value) ? selections.filter(function (item) {
|
2507
|
+
return item != value;
|
2508
|
+
}) : selections.concat([value]);
|
2509
|
+
setSelections(next);
|
2510
|
+
if (onChange) onChange(next);
|
2511
|
+
}
|
2512
|
+
|
2513
|
+
var items = options.map(function (option) {
|
2514
|
+
return _extends({}, option, {
|
2515
|
+
selected: selections.includes(option.value),
|
2516
|
+
onToggle: toggleSelection
|
2517
|
+
});
|
2518
|
+
});
|
2519
|
+
return /*#__PURE__*/React__default["default"].createElement("ul", {
|
2520
|
+
className: "multiselector " + className
|
2521
|
+
}, items.map(function (option) {
|
2522
|
+
return /*#__PURE__*/React__default["default"].createElement(ToggleButton, option);
|
2523
|
+
}));
|
2524
|
+
};
|
2525
|
+
/**
|
2526
|
+
* Toggle Button
|
2527
|
+
*/
|
2528
|
+
|
2529
|
+
var ToggleButton = function ToggleButton(props) {
|
2530
|
+
var label = props.label,
|
2531
|
+
value = props.value,
|
2532
|
+
_props$selected = props.selected,
|
2533
|
+
selected = _props$selected === void 0 ? false : _props$selected,
|
2534
|
+
onToggle = props.onToggle;
|
2535
|
+
|
2536
|
+
function toggle() {
|
2537
|
+
if (onToggle) onToggle(value);
|
2538
|
+
}
|
2539
|
+
|
2540
|
+
var selectedStyle = selected ? 'selected' : '';
|
2541
|
+
return /*#__PURE__*/React__default["default"].createElement("li", {
|
2542
|
+
className: selectedStyle + " " + value,
|
2543
|
+
onClick: toggle
|
2544
|
+
}, label);
|
2545
|
+
};
|
2546
|
+
|
2482
2547
|
/**
|
2483
2548
|
* Login Box
|
2484
2549
|
*/
|
@@ -10898,6 +10963,7 @@ exports.Menu = Menu;
|
|
10898
10963
|
exports.MenuIcon = MenuIcon;
|
10899
10964
|
exports.MenuItem = MenuItem;
|
10900
10965
|
exports.MenuSeparator = MenuSeparator;
|
10966
|
+
exports.MultiSelector = MultiSelector;
|
10901
10967
|
exports.Page = Page;
|
10902
10968
|
exports.PageContext = PageContext;
|
10903
10969
|
exports.PageProvider = PageProvider;
|
@@ -10930,6 +10996,7 @@ exports.Text = Text;
|
|
10930
10996
|
exports.TextArea = TextArea;
|
10931
10997
|
exports.TextField = TextField;
|
10932
10998
|
exports.Thumbnail = Thumbnail;
|
10999
|
+
exports.ToggleButton = ToggleButton;
|
10933
11000
|
exports.TokenField = TokenField;
|
10934
11001
|
exports.Tooltip = Tooltip;
|
10935
11002
|
exports.Tree = Tree;
|