@dotconnor/grommet
Version:
focus on the essential experience
235 lines (209 loc) • 7.39 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.CustomSearch = void 0;
var _react = _interopRequireWildcard(require("react"));
var _grommetIcons = require("grommet-icons");
var _grommet = require("grommet");
var _theme = require("./theme");
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var allContentPartners = [{
name: 'Test Partner',
id: '32131232'
}, {
name: 'Test Partner 1',
id: '32131232'
}, {
name: 'Test Partner 2',
id: '32131242'
}, {
name: 'Test Partner 3',
id: '32131252'
}, {
name: 'Test Partner 4',
id: '32131262'
}, {
name: 'Test Partner 5',
id: '32131272'
}, {
name: 'Test Partner 6',
id: '32131231'
}, {
name: 'Test Partner 7',
id: '32131234'
}, {
name: 'Test Partner 8',
id: '32131245'
}, {
name: 'Test Partner 9',
id: '32131256'
}, {
name: 'Test Partner 10',
id: '32131269'
}, {
name: 'Test Partner 11',
id: '32131244'
}];
var CustomSearch = function CustomSearch() {
var _useState = (0, _react.useState)([]),
selectedContentPartners = _useState[0],
setSelectedContentPartners = _useState[1];
var _useState2 = (0, _react.useState)(allContentPartners),
contentPartners = _useState2[0],
setContentPartners = _useState2[1];
var _useState3 = (0, _react.useState)(false),
searching = _useState3[0],
setSearching = _useState3[1];
var _useState4 = (0, _react.useState)(''),
searchQuery = _useState4[0],
setSerchQuery = _useState4[1];
var selectRef = (0, _react.useRef)();
var clearContentPartners = function clearContentPartners() {
setSelectedContentPartners([]);
};
(0, _react.useEffect)(function () {
var filterContentPartners = allContentPartners.filter(function (s) {
return s.name.toLowerCase().indexOf(searchQuery.toLowerCase()) >= 0;
});
setTimeout(function () {
setSearching(false);
setContentPartners(filterContentPartners);
}, 500);
}, [searching, searchQuery]);
var renderOption = function renderOption(_ref) {
var name = _ref.name;
return /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
direction: "row",
align: "center",
pad: "small",
flex: false
}, /*#__PURE__*/_react["default"].createElement(_grommet.CheckBox, {
tabIndex: "-1",
checked: selectedContentPartners.some(function (partner) {
return partner.name === name;
}),
label: /*#__PURE__*/_react["default"].createElement(_grommet.Text, {
size: "small"
}, name),
onChange: function onChange() {}
}));
};
var renderContentPartners = function renderContentPartners() {
return /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
direction: "row",
gap: "xsmall",
pad: {
left: 'small',
vertical: 'small'
},
align: "center",
flex: true
}, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
background: "brand",
round: "medium",
align: "center",
justify: "center",
pad: {
horizontal: 'xsmall'
},
style: {
minWidth: '21px'
}
}, /*#__PURE__*/_react["default"].createElement(_grommet.Text, {
size: "small"
}, selectedContentPartners.length)), /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
flex: true
}, /*#__PURE__*/_react["default"].createElement(_grommet.Text, {
size: "small",
truncate: true
}, selectedContentPartners.map(function (_ref2) {
var name = _ref2.name;
return name;
}).join(', '))), /*#__PURE__*/_react["default"].createElement(_grommet.Button, {
href: "#",
onFocus: function onFocus(event) {
return event.stopPropagation();
},
onClick: function onClick(event) {
event.preventDefault();
event.stopPropagation();
clearContentPartners();
selectRef.current.focus();
}
}, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
background: "gray",
round: "full"
}, /*#__PURE__*/_react["default"].createElement(_grommetIcons.FormClose, {
style: {
width: '12px',
height: '12px'
}
}))));
};
var sortContentPartners = function sortContentPartners(selectedPartnerNames) {
return function (p1, p2) {
var p1Exists = selectedPartnerNames.includes(p1.name);
var p2Exists = selectedPartnerNames.includes(p2.name);
if (!p1Exists && p2Exists) {
return 1;
}
if (p1Exists && !p2Exists) {
return -1;
}
if (p1.name.toLowerCase() < p2.name.toLowerCase()) {
return -1;
}
return 1;
};
};
return /*#__PURE__*/_react["default"].createElement(_grommet.Grommet, {
full: true,
theme: _theme.theme
}, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
fill: true,
align: "center",
justify: "center",
width: "medium"
}, /*#__PURE__*/_react["default"].createElement(_grommet.Select, {
ref: selectRef,
closeOnChange: false,
placeholder: "Select Content Partners",
searchPlaceholder: "Search Content Partners",
emptySearchMessage: "No partners found",
searching: searching,
multiple: true,
value: selectedContentPartners.length ? renderContentPartners() : undefined,
selected: selectedContentPartners.map(function (option) {
return contentPartners.indexOf(option);
}),
options: contentPartners,
onChange: function onChange(_ref3) {
var option = _ref3.option;
var newSelectedPartners = [].concat(selectedContentPartners);
var seasonIndex = newSelectedPartners.map(function (_ref4) {
var name = _ref4.name;
return name;
}).indexOf(option.name);
if (seasonIndex >= 0) {
newSelectedPartners.splice(seasonIndex, 1);
} else {
newSelectedPartners.push(option);
}
var selectedPartnerNames = newSelectedPartners.map(function (_ref5) {
var name = _ref5.name;
return name;
});
var sortedContentPartners = [].concat(allContentPartners).sort(sortContentPartners(selectedPartnerNames));
setSelectedContentPartners(newSelectedPartners);
setContentPartners(sortedContentPartners);
},
onSearch: function onSearch(query) {
setSearching(true);
setSerchQuery(query);
}
}, renderOption)));
};
exports.CustomSearch = CustomSearch;
CustomSearch.story = {
name: 'Custom search'
};