sanity-plugin-order-documents
Version:
A Sanity Studio plugin that helps you order your documents via drag-and-drop.
160 lines (159 loc) • 7.27 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Select = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _index = _interopRequireDefault(require("../../index.css"));
var _functions = require("../../functions");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 Select = function Select(_ref) {
var options = _ref.options,
onChange = _ref.onChange,
value = _ref.value,
label = _ref.label;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var _useState3 = (0, _react.useState)(""),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
search = _useState4[0],
setSearch = _useState4[1];
var _useState5 = (0, _react.useState)({
value: value,
label: label
}),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
selected = _useState6[0],
setSelected = _useState6[1];
var inputRef = (0, _react.useRef)(null);
var iconsRef = (0, _react.useRef)(null);
var listRef = (0, _react.useRef)(null);
var filteredOptions = (0, _react.useMemo)(function () {
return options.filter(function (_ref2) {
var label = _ref2.label,
value = _ref2.value;
var regex = new RegExp((0, _functions.escapeStringRegExp)(search));
return regex.test(label) || regex.test(value);
});
}, [options, search]);
var selectOption = (0, _react.useCallback)(function (_ref3) {
var value = _ref3.value,
label = _ref3.label;
setSelected({
value: value,
label: label
});
setSearch(label);
setIsOpen(false);
}, []);
(0, _react.useEffect)(function () {
onChange(selected);
}, [selected]);
(0, _react.useEffect)(function () {
if (label && value) {
selectOption({
label: label,
value: value
});
}
}, [label, value]);
(0, _functions.useOnClickOutside)([inputRef, iconsRef, listRef], function () {
return setIsOpen(false);
});
return /*#__PURE__*/_react["default"].createElement("div", {
className: _index["default"].orderDocumentsSelectInputWrapper
}, /*#__PURE__*/_react["default"].createElement("input", {
className: _index["default"].orderDocumentsSelectInput,
value: isOpen ? search : selected.label,
placeholder: "Select...",
ref: inputRef,
onFocus: function onFocus() {
setIsOpen(true);
setSearch("");
},
onChange: function onChange(e) {
setIsOpen(true);
setSearch(e.target.value);
},
onKeyDown: function onKeyDown(e) {
if (e.key === "Escape") {
if (search) {
setSearch("");
} else {
setIsOpen(false);
inputRef.current.blur();
}
}
}
}), /*#__PURE__*/_react["default"].createElement("div", {
className: _index["default"].orderDocumentsSelectIconsSection,
ref: iconsRef,
onClick: function onClick() {
if (isOpen) {
setIsOpen(false);
} else {
setIsOpen(true);
inputRef.current.focus();
}
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _index["default"].orderDocumentsArrowIconWrapper,
onClick: function onClick() {
setIsOpen(true);
setSearch("");
}
}, /*#__PURE__*/_react["default"].createElement("svg", {
width: "20",
viewBox: "0 0 20 20",
"aria-hidden": "true",
focusable: "false"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
}))), /*#__PURE__*/_react["default"].createElement("span", {
className: _index["default"].orderDocumentsSelectIconsSeparator
}), /*#__PURE__*/_react["default"].createElement("div", {
className: _index["default"].orderDocumentsArrowIconWrapper
}, /*#__PURE__*/_react["default"].createElement("svg", {
width: "20",
viewBox: "0 0 20 20",
"aria-hidden": "true",
focusable: "false"
}, /*#__PURE__*/_react["default"].createElement("path", {
d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
})))), /*#__PURE__*/_react["default"].createElement("ul", {
ref: listRef,
className: [_index["default"].orderDocumentsSelectOptionsList, isOpen && filteredOptions.length ? _index["default"].orderDocumentsSelectOptionsListOpen : ""].join(" ")
}, isOpen && filteredOptions.map(function (_ref4, index) {
var value = _ref4.value,
label = _ref4.label;
return /*#__PURE__*/_react["default"].createElement("li", {
className: [_index["default"].orderDocumentsSelectOptionsListItem, index === 0 ? _index["default"].orderDocumentsSelectOptionsListItemFirst : "", index === filteredOptions.length - 1 ? _index["default"].orderDocumentsSelectOptionsListItemLast : "", value === selected.value ? _index["default"].orderDocumentsSelectOptionsListItemSelected : ""].join(" "),
key: value,
tabIndex: 0,
onKeyDown: function onKeyDown(e) {
if (e.key === "Enter") {
selectOption({
value: value,
label: label
});
}
if (e.key === "Escape") {
inputRef.current.focus();
}
},
onClick: function onClick() {
selectOption({
value: value,
label: label
});
}
}, label);
})));
};
exports.Select = Select;