@procore/core-react
Version:
React library of Procore Design Guidelines
101 lines • 6.74 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { DragDropContext, Droppable } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration';
import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
import { FocusScope } from '@react-aria/focus';
import React from 'react';
import { Virtuoso } from 'react-virtuoso';
import { presets } from './presets';
import { DraggableOptionContent, OptionContent } from './SuperSelect.components';
import { SuperSelectContext, useSuperSelect } from './useSuperSelect';
export var InternalDragDropContext = /*#__PURE__*/React.createContext({
isDraggingOver: false
});
var InternalDragDropProvider = function InternalDragDropProvider(_ref) {
var isDraggingOver = _ref.isDraggingOver,
children = _ref.children;
var value = React.useMemo(function () {
return {
isDraggingOver: isDraggingOver
};
}, [isDraggingOver]);
return /*#__PURE__*/React.createElement(InternalDragDropContext.Provider, {
value: value
}, children);
};
function SelectComponent(props, ref) {
var search = props.search === undefined || props.search === true;
var preset = props.preset || '';
var config = _objectSpread(_objectSpread(_objectSpread({}, presets[preset]), props), {}, {
search: search
});
var ctx = useSuperSelect(config);
React.useImperativeHandle(ref, function () {
return ctx;
});
React.useEffect(function () {
if (props.value && props.onChange === undefined) {
console.warn('Must provide both a `value` and `onChange` prop for a controlled Select');
}
}, []);
return /*#__PURE__*/React.createElement(SuperSelectContext.Provider, {
value: ctx
}, /*#__PURE__*/React.createElement(ctx.components.Trigger, _extends({
ref: ctx.refs.floating.refs.setReference
}, ctx.props.trigger())), /*#__PURE__*/React.createElement(FloatingPortal, null, ctx.state.open &&
/*#__PURE__*/
// FocusScope is needed to allow move focus from Modal and Tearsheet
React.createElement(FocusScope, null, /*#__PURE__*/React.createElement(FloatingFocusManager, {
context: ctx.refs.floating.context,
order: config.search ? ['content', 'reference'] : ['reference', 'content'],
initialFocus: config.multiple ? undefined : 0
}, /*#__PURE__*/React.createElement(ctx.components.Overlay, _extends({
ref: ctx.refs.floating.refs.setFloating
}, ctx.props.overlay()), (config.search === true || config.search === undefined && !config.multiple) && /*#__PURE__*/React.createElement(ctx.components.SearchContainer, ctx.props.searchContainer(), /*#__PURE__*/React.createElement(ctx.components.Search, ctx.props.search())), config.header && /*#__PURE__*/React.createElement(ctx.components.Header, ctx.props.header(), config.header), config.selectAllEnabled && config.multiple && /*#__PURE__*/React.createElement(ctx.components.SelectAll, {
"data-index": 0
}, /*#__PURE__*/React.createElement(OptionContent, {
option: ctx.state.selectAllOption
})), ctx.state.options.length > 0 ? /*#__PURE__*/React.createElement(ctx.components.Options, null, config.draggable ? /*#__PURE__*/React.createElement(DragDropContext, {
onDragEnd: ctx.state.onDragEnd
}, /*#__PURE__*/React.createElement(Droppable, {
droppableId: "droppable",
mode: "virtual",
renderClone: function renderClone(provided, snapshot, dragged) {
var option = ctx.state.options[dragged.source.index];
return /*#__PURE__*/React.createElement(ctx.components.Item, _extends({
isDragging: true,
"data-index": dragged.source.index
}, provided.draggableProps), /*#__PURE__*/React.createElement(ctx.components.DragHandle, null), /*#__PURE__*/React.createElement(ctx.components.OptionLabel, {
option: option
}));
}
}, function (provided, snapshot) {
return /*#__PURE__*/React.createElement(InternalDragDropProvider, {
isDraggingOver: snapshot.isDraggingOver
}, /*#__PURE__*/React.createElement(Virtuoso, _extends({}, ctx.props.virtuoso(), {
scrollerRef: function scrollerRef(el) {
return provided.innerRef(el);
},
itemContent: function itemContent(i, data) {
return /*#__PURE__*/React.createElement(DraggableOptionContent, {
index: i,
option: data
});
}
})));
})) : /*#__PURE__*/React.createElement(Virtuoso, _extends({}, ctx.props.virtuoso(), {
ref: ctx.refs.virtuoso,
itemContent: function itemContent(i, option) {
return /*#__PURE__*/React.createElement(OptionContent, {
option: option
});
}
}))) : /*#__PURE__*/React.createElement(ctx.components.EmptyMessage, ctx.props.emptyMessage()), config.footer && /*#__PURE__*/React.createElement(ctx.components.Footer, ctx.props.footer(), config.footer))))));
}
export var SuperSelect = /*#__PURE__*/React.forwardRef(SelectComponent);
//# sourceMappingURL=SuperSelect.js.map