@ozen-ui/kit
Version:
React component library
45 lines (44 loc) • 2.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Segment = exports.cnSegment = void 0;
var tslib_1 = require("tslib");
require("./Segment.css");
var react_1 = tslib_1.__importStar(require("react"));
var useControlled_1 = require("../../hooks/useControlled");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
var constants_1 = require("./constants");
var SegmentContext_1 = require("./SegmentContext");
exports.cnSegment = (0, classname_1.cn)('Segment');
exports.Segment = (0, react_1.forwardRef)(function (inProps, ref) {
var _a = (0, useThemeProps_1.useThemeProps)({ name: 'Segment', props: inProps }), _b = _a.size, size = _b === void 0 ? constants_1.SEGMENT_DEFAULT_SIZE : _b, _c = _a.variant, variant = _c === void 0 ? constants_1.SEGMENT_DEFAULT_VARIANT : _c, _d = _a.selectedColor, selectedColor = _d === void 0 ? constants_1.SEGMENT_DEFAULT_SELECTED_COLOR : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? constants_1.SEGMENT_DEFAULT_FULL_WIDTH : _e, _f = _a.disabled, disabled = _f === void 0 ? constants_1.SEGMENT_DEFAULT_DISABLED : _f, valueProp = _a.value, name = _a.name, defaultValue = _a.defaultValue, onChange = _a.onChange, className = _a.className, children = _a.children, other = tslib_1.__rest(_a, ["size", "variant", "selectedColor", "fullWidth", "disabled", "value", "name", "defaultValue", "onChange", "className", "children"]);
var _g = tslib_1.__read((0, useControlled_1.useControlled)({
name: 'Segment',
value: valueProp,
defaultValue: defaultValue,
state: 'value',
}), 2), valueState = _g[0], setValueState = _g[1];
var handleChange = (0, react_1.useCallback)(function (e) {
setValueState(e.target.value);
onChange === null || onChange === void 0 ? void 0 : onChange(e);
}, [onChange]);
var iconSize = (0, react_1.useMemo)(function () { return (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size); }, [size]);
var contextState = (0, react_1.useMemo)(function () { return ({
name: name,
disabled: disabled,
iconSize: iconSize,
selectedColor: selectedColor,
selected: valueState,
onChange: handleChange,
}); }, [name, disabled, iconSize, selectedColor, valueState, handleChange]);
return (react_1.default.createElement("fieldset", tslib_1.__assign({ ref: ref, disabled: disabled, className: (0, exports.cnSegment)({
size: size,
variant: variant,
disabled: disabled,
selectedColor: selectedColor,
fullWidth: fullWidth,
}, [className]) }, other),
react_1.default.createElement(SegmentContext_1.SegmentContext.Provider, { value: contextState }, children)));
});
exports.Segment.displayName = 'Segment';