@procore/core-react
Version:
React library of Procore Design Guidelines
51 lines • 2.42 kB
JavaScript
import { Check } from '@procore/core-icons';
import React from 'react';
import { Pill } from '../../Pill/Pill';
import { PillSelectCheckedContainer } from '../../PillSelect/PillSelect.styles';
import { Tooltip } from '../../Tooltip/Tooltip';
import { OverflowObserver } from '../../_hooks/OverflowObserver';
import { Label } from '../SuperSelect.components';
import { PillSelectLabel, PillSelectLabelWrapper, PillSelectOptionWrapper, StyledLabel } from '../SuperSelect.styles';
import { useSuperSelectContext } from '../useSuperSelect';
export var pillPreset = {
components: {
Label: /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var hoverable = _ref.hoverable;
var ctx = useSuperSelectContext();
return /*#__PURE__*/React.createElement(StyledLabel, {
$hoverable: hoverable
}, /*#__PURE__*/React.createElement(PillSelectLabelWrapper, null, /*#__PURE__*/React.createElement(OverflowObserver, null, function (_ref2) {
var _ctx$state$selectedOp;
var isOverflowing = _ref2.isOverflowing,
ref = _ref2.ref;
return /*#__PURE__*/React.createElement(Tooltip, {
trigger: isOverflowing ? 'hover' : 'none',
overlay: ctx.state.selectedLabel
}, ctx.state.isEmpty() ? /*#__PURE__*/React.createElement(Label, {
ref: ref,
hoverable: hoverable
}) : /*#__PURE__*/React.createElement(PillSelectLabel, {
ref: ref,
color: (_ctx$state$selectedOp = ctx.state.selectedOption) === null || _ctx$state$selectedOp === void 0 ? void 0 : _ctx$state$selectedOp.color
}, ctx.state.selectedLabel));
})));
}),
OptionLabel: function OptionLabel(_ref3) {
var option = _ref3.option;
var ctx = useSuperSelectContext();
return /*#__PURE__*/React.createElement(PillSelectOptionWrapper, null, /*#__PURE__*/React.createElement(Pill, {
color: option.color
}, ctx.option.label(option)), /*#__PURE__*/React.createElement(PillSelectCheckedContainer, null, ctx.option.isSelected(option) && /*#__PURE__*/React.createElement(Check, {
size: "sm"
})));
},
MultiValue: function MultiValue(_ref4) {
var option = _ref4.option;
var ctx = useSuperSelectContext();
return /*#__PURE__*/React.createElement(Pill, {
color: option.color
}, ctx.option.label(option));
}
}
};
//# sourceMappingURL=pillPreset.js.map