@ozen-ui/kit
Version:
React component library
42 lines (41 loc) • 2.66 kB
JavaScript
import { __assign, __read, __rest } from "tslib";
import './Segment.css';
import React, { useMemo, useCallback, forwardRef } from 'react';
import { useControlled } from '../../hooks/useControlled';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
import { SEGMENT_DEFAULT_SELECTED_COLOR, SEGMENT_DEFAULT_SIZE, SEGMENT_DEFAULT_VARIANT, SEGMENT_DEFAULT_FULL_WIDTH, SEGMENT_DEFAULT_DISABLED, } from './constants';
import { SegmentContext } from './SegmentContext';
export var cnSegment = cn('Segment');
export var Segment = forwardRef(function (inProps, ref) {
var _a = useThemeProps({ name: 'Segment', props: inProps }), _b = _a.size, size = _b === void 0 ? SEGMENT_DEFAULT_SIZE : _b, _c = _a.variant, variant = _c === void 0 ? SEGMENT_DEFAULT_VARIANT : _c, _d = _a.selectedColor, selectedColor = _d === void 0 ? SEGMENT_DEFAULT_SELECTED_COLOR : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? SEGMENT_DEFAULT_FULL_WIDTH : _e, _f = _a.disabled, disabled = _f === void 0 ? SEGMENT_DEFAULT_DISABLED : _f, valueProp = _a.value, name = _a.name, defaultValue = _a.defaultValue, onChange = _a.onChange, className = _a.className, children = _a.children, other = __rest(_a, ["size", "variant", "selectedColor", "fullWidth", "disabled", "value", "name", "defaultValue", "onChange", "className", "children"]);
var _g = __read(useControlled({
name: 'Segment',
value: valueProp,
defaultValue: defaultValue,
state: 'value',
}), 2), valueState = _g[0], setValueState = _g[1];
var handleChange = useCallback(function (e) {
setValueState(e.target.value);
onChange === null || onChange === void 0 ? void 0 : onChange(e);
}, [onChange]);
var iconSize = useMemo(function () { return getIconSizeToFormElement(size); }, [size]);
var contextState = useMemo(function () { return ({
name: name,
disabled: disabled,
iconSize: iconSize,
selectedColor: selectedColor,
selected: valueState,
onChange: handleChange,
}); }, [name, disabled, iconSize, selectedColor, valueState, handleChange]);
return (React.createElement("fieldset", __assign({ ref: ref, disabled: disabled, className: cnSegment({
size: size,
variant: variant,
disabled: disabled,
selectedColor: selectedColor,
fullWidth: fullWidth,
}, [className]) }, other),
React.createElement(SegmentContext.Provider, { value: contextState }, children)));
});
Segment.displayName = 'Segment';