@dt-dds/react-checkbox 1.0.0-beta.59 → 1.0.0-beta.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/index.js +27 -8
- package/dist/index.mjs +27 -8
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -114,6 +114,16 @@ var getCheckboxColors = (theme) => ({
|
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
});
|
|
117
|
+
var getCheckboxState = (theme, $checked, $indeterminate, $disabled, $error) => {
|
|
118
|
+
const colors = getCheckboxColors(theme);
|
|
119
|
+
const isActive = $checked || $indeterminate;
|
|
120
|
+
const activeKey = isActive ? "active" : "inactive";
|
|
121
|
+
if ($disabled) {
|
|
122
|
+
return colors.disabled[activeKey];
|
|
123
|
+
}
|
|
124
|
+
const errorKey = $error ? "error" : "normal";
|
|
125
|
+
return colors.default[activeKey][errorKey];
|
|
126
|
+
};
|
|
117
127
|
var CheckboxStyled = (0, import_styled.default)("label", {
|
|
118
128
|
shouldForwardProp: (prop) => (0, import_is_prop_valid.default)(prop) && !prop.startsWith("$")
|
|
119
129
|
})`
|
|
@@ -142,14 +152,17 @@ var CheckboxBoxStyled = (0, import_styled.default)("div", {
|
|
|
142
152
|
border-radius: ${({ theme }) => theme.shape.checkbox};
|
|
143
153
|
|
|
144
154
|
${({ theme, $checked, $indeterminate, $disabled, $error, $size }) => {
|
|
145
|
-
const
|
|
146
|
-
|
|
147
|
-
|
|
155
|
+
const state = getCheckboxState(
|
|
156
|
+
theme,
|
|
157
|
+
$checked,
|
|
158
|
+
$indeterminate,
|
|
159
|
+
$disabled,
|
|
160
|
+
$error
|
|
161
|
+
);
|
|
162
|
+
const boxSize = SIZES[$size];
|
|
148
163
|
return `
|
|
149
|
-
height: ${
|
|
150
|
-
|
|
151
|
-
width: ${SIZES[$size]}px;
|
|
152
|
-
min-width: ${SIZES[$size]}px;
|
|
164
|
+
height: ${boxSize}px;
|
|
165
|
+
width: ${boxSize}px;
|
|
153
166
|
|
|
154
167
|
background-color: ${state.bg};
|
|
155
168
|
border: 1px solid ${state.border};
|
|
@@ -238,9 +251,14 @@ var Checkbox = (0, import_react.forwardRef)(
|
|
|
238
251
|
if (isDisabled) return;
|
|
239
252
|
onChange == null ? void 0 : onChange(event);
|
|
240
253
|
};
|
|
254
|
+
const getIconCode = () => {
|
|
255
|
+
if (isIndeterminate) return "remove";
|
|
256
|
+
if (isChecked) return "check";
|
|
257
|
+
return null;
|
|
258
|
+
};
|
|
241
259
|
const hasLabel = Boolean(label || children);
|
|
242
260
|
const inputId = id || (hasLabel ? dataTestId : void 0);
|
|
243
|
-
const iconCode =
|
|
261
|
+
const iconCode = getIconCode();
|
|
244
262
|
const iconSize = size === "small" ? "medium" : "large";
|
|
245
263
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
246
264
|
CheckboxStyled,
|
|
@@ -272,6 +290,7 @@ var Checkbox = (0, import_react.forwardRef)(
|
|
|
272
290
|
$error: hasError,
|
|
273
291
|
$indeterminate: isIndeterminate,
|
|
274
292
|
$size: size,
|
|
293
|
+
"data-testid": "checkbox-box",
|
|
275
294
|
children: iconCode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
276
295
|
import_react_icon.Icon,
|
|
277
296
|
{
|
package/dist/index.mjs
CHANGED
|
@@ -81,6 +81,16 @@ var getCheckboxColors = (theme) => ({
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
});
|
|
84
|
+
var getCheckboxState = (theme, $checked, $indeterminate, $disabled, $error) => {
|
|
85
|
+
const colors = getCheckboxColors(theme);
|
|
86
|
+
const isActive = $checked || $indeterminate;
|
|
87
|
+
const activeKey = isActive ? "active" : "inactive";
|
|
88
|
+
if ($disabled) {
|
|
89
|
+
return colors.disabled[activeKey];
|
|
90
|
+
}
|
|
91
|
+
const errorKey = $error ? "error" : "normal";
|
|
92
|
+
return colors.default[activeKey][errorKey];
|
|
93
|
+
};
|
|
84
94
|
var CheckboxStyled = styled("label", {
|
|
85
95
|
shouldForwardProp: (prop) => isPropValid(prop) && !prop.startsWith("$")
|
|
86
96
|
})`
|
|
@@ -109,14 +119,17 @@ var CheckboxBoxStyled = styled("div", {
|
|
|
109
119
|
border-radius: ${({ theme }) => theme.shape.checkbox};
|
|
110
120
|
|
|
111
121
|
${({ theme, $checked, $indeterminate, $disabled, $error, $size }) => {
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
122
|
+
const state = getCheckboxState(
|
|
123
|
+
theme,
|
|
124
|
+
$checked,
|
|
125
|
+
$indeterminate,
|
|
126
|
+
$disabled,
|
|
127
|
+
$error
|
|
128
|
+
);
|
|
129
|
+
const boxSize = SIZES[$size];
|
|
115
130
|
return `
|
|
116
|
-
height: ${
|
|
117
|
-
|
|
118
|
-
width: ${SIZES[$size]}px;
|
|
119
|
-
min-width: ${SIZES[$size]}px;
|
|
131
|
+
height: ${boxSize}px;
|
|
132
|
+
width: ${boxSize}px;
|
|
120
133
|
|
|
121
134
|
background-color: ${state.bg};
|
|
122
135
|
border: 1px solid ${state.border};
|
|
@@ -205,9 +218,14 @@ var Checkbox = forwardRef(
|
|
|
205
218
|
if (isDisabled) return;
|
|
206
219
|
onChange == null ? void 0 : onChange(event);
|
|
207
220
|
};
|
|
221
|
+
const getIconCode = () => {
|
|
222
|
+
if (isIndeterminate) return "remove";
|
|
223
|
+
if (isChecked) return "check";
|
|
224
|
+
return null;
|
|
225
|
+
};
|
|
208
226
|
const hasLabel = Boolean(label || children);
|
|
209
227
|
const inputId = id || (hasLabel ? dataTestId : void 0);
|
|
210
|
-
const iconCode =
|
|
228
|
+
const iconCode = getIconCode();
|
|
211
229
|
const iconSize = size === "small" ? "medium" : "large";
|
|
212
230
|
return /* @__PURE__ */ jsxs(
|
|
213
231
|
CheckboxStyled,
|
|
@@ -239,6 +257,7 @@ var Checkbox = forwardRef(
|
|
|
239
257
|
$error: hasError,
|
|
240
258
|
$indeterminate: isIndeterminate,
|
|
241
259
|
$size: size,
|
|
260
|
+
"data-testid": "checkbox-box",
|
|
242
261
|
children: iconCode ? /* @__PURE__ */ jsx(
|
|
243
262
|
Icon,
|
|
244
263
|
{
|