bnk-components
Version:
Reusable React components for Issaglam UI - Modern, responsive UI components with TypeScript support
110 lines (109 loc) • 5.95 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { forwardRef } from 'react';
import './CheckBox.css';
const CheckBox = forwardRef((props, ref) => {
const { checked, defaultChecked, disabled = false, indeterminate = false, label, name, value, size = 'medium', variant = 'default', className = '', style, labelPosition = 'right', required = false, error = false, errorMessage, helperText, id, onChange, onFocus, onBlur, onClick, formObject, fieldPath } = props, rest = __rest(props, ["checked", "defaultChecked", "disabled", "indeterminate", "label", "name", "value", "size", "variant", "className", "style", "labelPosition", "required", "error", "errorMessage", "helperText", "id", "onChange", "onFocus", "onBlur", "onClick", "formObject", "fieldPath"]);
// Form entegrasyonu için değer hesaplama
const getFieldValue = (obj, path) => {
return path.split('.').reduce((current, key) => current === null || current === void 0 ? void 0 : current[key], obj);
};
const setFieldValue = (obj, path, value) => {
const keys = path.split('.');
const lastKey = keys.pop();
const target = keys.reduce((current, key) => {
if (!current[key])
current[key] = {};
return current[key];
}, obj);
target[lastKey] = value;
};
// Form değerini al
const formValue = formObject && fieldPath ? getFieldValue(formObject.model, fieldPath) : undefined;
// Checked durumunu belirle
const isChecked = checked !== undefined ? checked : formValue;
const checkboxId = id || `checkbox-${Math.random().toString(36).substring(2, 9)}`;
const handleChange = (event) => {
if (disabled)
return;
const newValue = event.target.checked;
// Form entegrasyonu
if (formObject && fieldPath && formObject.setModel) {
const newModel = Object.assign({}, formObject.model);
setFieldValue(newModel, fieldPath, newValue);
formObject.setModel(newModel);
}
if (onChange) {
onChange(newValue);
}
};
const handleClick = (event) => {
if (onClick && !disabled) {
onClick(event);
}
};
const handleFocus = (event) => {
if (onFocus && !disabled) {
onFocus(event);
}
};
const handleBlur = (event) => {
if (onBlur && !disabled) {
onBlur(event);
}
};
// Indeterminate state için ref kullanımı
React.useEffect(() => {
if (ref && typeof ref === 'object' && ref.current) {
ref.current.indeterminate = indeterminate;
}
}, [indeterminate, ref]);
const checkboxClasses = [
'checkbox-wrapper',
`checkbox-${size}`,
`checkbox-${variant}`,
disabled ? 'checkbox-disabled' : '',
error ? 'checkbox-error' : '',
indeterminate ? 'checkbox-indeterminate' : '',
labelPosition === 'left' ? 'checkbox-label-left' : 'checkbox-label-right',
className
].filter(Boolean).join(' ');
const renderCheckbox = () => (_jsxs("div", { className: "checkbox-input-wrapper", onClick: (e) => {
if (!disabled) {
e.preventDefault();
e.stopPropagation();
const input = e.currentTarget.querySelector('input');
if (input) {
input.click();
}
}
}, children: [_jsx("input", Object.assign({ ref: ref, type: "checkbox", id: checkboxId, name: name, value: value, checked: isChecked, defaultChecked: defaultChecked, disabled: disabled, required: required, className: "checkbox-input", onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onClick: (e) => {
e.stopPropagation();
if (handleClick) {
handleClick(e);
}
} }, rest)), _jsx("span", { className: "checkbox-checkmark", children: indeterminate ? (_jsx("svg", { viewBox: "0 0 16 16", className: "checkbox-icon", children: _jsx("path", { d: "M4 8h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })) : (_jsx("svg", { viewBox: "0 0 16 16", className: "checkbox-icon", children: _jsx("path", { d: "M3 8l3 3 7-7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }));
const renderLabel = () => (label && (_jsxs("span", { className: "checkbox-label", onClick: (e) => {
if (!disabled) {
e.preventDefault();
e.stopPropagation();
const input = document.getElementById(checkboxId);
if (input) {
input.click();
}
}
}, children: [label, required && _jsx("span", { className: "checkbox-required", children: "*" })] })));
return (_jsxs("div", { className: checkboxClasses, style: style, children: [labelPosition === 'left' && renderLabel(), renderCheckbox(), labelPosition === 'right' && renderLabel(), (helperText || errorMessage) && (_jsx("div", { className: "checkbox-helper-text", children: error && errorMessage ? (_jsx("span", { className: "checkbox-error-text", children: errorMessage })) : (helperText && _jsx("span", { className: "checkbox-helper", children: helperText })) }))] }));
});
CheckBox.displayName = 'CheckBox';
export default CheckBox;