@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
149 lines (148 loc) • 6.22 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Trigger_exports = {};
__export(Trigger_exports, {
SelectTrigger: () => SelectTrigger
});
module.exports = __toCommonJS(Trigger_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_core = require("@crossed/core");
var import_react = require("react");
var import_styled = require("@crossed/styled");
var import_unicons = require("@crossed/unicons");
var import_form = require("../../styles/form");
var import_VisibilityHidden = require("../../other/VisibilityHidden");
var import_CloseButton = require("../../buttons/CloseButton");
var import_Button = require("../../buttons/Button");
var import_XBox = require("../../layout/XBox");
var import_Text = require("../../typography/Text");
var import_Form = require("../../forms/Form");
var import_context = require("./context");
var import_styles = require("./styles");
var import_react_native = require("react-native");
var import_Floating = require("../../overlay/Floating");
const ClearButton = (0, import_react.memo)(() => {
const { value, setValue } = (0, import_context.useSelectValue)();
const showClear = !!value;
const handleClear = (0, import_react.useCallback)(() => setValue(""), [setValue]);
return showClear ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_XBox.XBox,
{
style: (0, import_styled.composeStyles)(
import_form.form.elementRight,
(0, import_styled.inlineStyle)(({ space }) => ({
base: { marginRight: space.md }
}))
),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CloseButton.CloseButton, { onPress: handleClear })
}
) : null;
});
const Value = () => {
const { value, items, renderValue } = (0, import_context.useSelectValue)();
const { multiple } = (0, import_context.useSelectConfig)();
const id = (0, import_react.useId)();
const tmp = !value ? [] : Array.isArray(value) ? value : [value];
const toRender = tmp && tmp.length > 3 ? tmp.slice(0, 3) : tmp;
const labelByValue = items.reduce((acc, i) => {
if ("title" in i) {
return {
...acc,
...i.data.reduce((acc2, d) => ({ ...acc2, [`${d.value}`]: d }), {})
};
}
return { ...acc, [`${i.value}`]: i };
}, {});
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisibilityHidden.VisibilityHidden, { hide: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_native.TextInput,
{
focusable: false,
value: `${Array.isArray(value) ? value.join(", ") : value}`
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XBox.XBox, { style: (0, import_styled.inlineStyle)(() => ({ base: { gap: 5, flexShrink: 1 } })), children: renderValue ? renderValue(value) : toRender.map((e, i) => {
var _a;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Text.Text,
{
ellipsizeMode: "tail",
numberOfLines: 1,
style: (0, import_styled.composeStyles)(
import_styles.useSelect.value,
multiple && (0, import_styled.inlineStyle)(({ colors, space }) => ({
base: {
backgroundColor: colors.info.light,
padding: space.xxs,
borderRadius: 4,
borderWidth: 1,
borderColor: colors.info.primary,
color: colors.info.dark
}
}))
// style
),
children: i === 2 ? `...+${tmp.length - i}` : (_a = labelByValue[`${e}`]) == null ? void 0 : _a.label
},
`${id}-${e}`
);
}) })
] });
};
const SelectTrigger = (0, import_core.withStaticProperties)(
(0, import_react.memo)(
(0, import_react.forwardRef)(({ children, ...props }, ref) => {
const { clearable } = (0, import_context.useSelectConfig)();
(0, import_styled.useTheme)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_XBox.XBox, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Form.FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Floating.Floating.Trigger,
{
...props,
style: (0, import_styled.composeStyles)(
!children && import_form.form.input,
!children && import_styles.useSelect.trigger,
props.disabled && import_form.form.disabled,
// error && form.inputError,
props.style
),
ref,
children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Value, {}),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_unicons.ChevronDown,
{
...import_styles.useSelect.icon.style(),
color: import_form.form.placeholder.style().style.color
}
)
] })
}
) }),
clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClearButton, {})
] });
})
),
{ Text: import_Button.Button.Text }
);
SelectTrigger.displayName = "Select.Trigger";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
SelectTrigger
});
//# sourceMappingURL=Trigger.js.map