@cleartrip/ct-design-checkbox 4.0.0 → 5.0.0
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/README.md +63 -0
- package/dist/Checkbox.d.ts +2 -8
- package/dist/Checkbox.d.ts.map +1 -1
- package/dist/Checkbox.native.d.ts +5 -0
- package/dist/Checkbox.native.d.ts.map +1 -0
- package/dist/ct-design-checkbox.browser.cjs.js +1 -1
- package/dist/ct-design-checkbox.browser.cjs.js.map +1 -1
- package/dist/ct-design-checkbox.browser.esm.js +1 -1
- package/dist/ct-design-checkbox.browser.esm.js.map +1 -1
- package/dist/ct-design-checkbox.cjs.js +103 -50
- package/dist/ct-design-checkbox.cjs.js.map +1 -1
- package/dist/ct-design-checkbox.esm.js +104 -46
- package/dist/ct-design-checkbox.esm.js.map +1 -1
- package/dist/ct-design-checkbox.umd.js +1737 -138
- package/dist/ct-design-checkbox.umd.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.native.d.ts +3 -0
- package/dist/index.native.d.ts.map +1 -0
- package/dist/style.d.ts +10 -12
- package/dist/style.d.ts.map +1 -1
- package/dist/type.d.ts +18 -13
- package/dist/type.d.ts.map +1 -1
- package/package.json +22 -12
- package/src/Checkbox.native.tsx +104 -0
- package/src/Checkbox.tsx +127 -0
- package/src/index.native.ts +2 -0
- package/src/index.ts +2 -0
- package/src/style.ts +54 -0
- package/src/type.ts +58 -0
|
@@ -1,58 +1,116 @@
|
|
|
1
|
-
import { __rest, __assign } from 'tslib';
|
|
2
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
2
|
import { forwardRef } from 'react';
|
|
4
|
-
import styled from 'styled-components';
|
|
5
3
|
import { Container } from '@cleartrip/ct-design-container';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
4
|
+
import { TypographyColor, Typography, TypographyVariant } from '@cleartrip/ct-design-typography';
|
|
5
|
+
import { CheckboxTick } from '@cleartrip/ct-design-icons';
|
|
6
|
+
import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
|
|
7
|
+
import { css } from '@emotion/css';
|
|
10
8
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
const getBorderStyles = (theme, isSelected, isDisabled) => {
|
|
10
|
+
switch (true) {
|
|
11
|
+
case isDisabled: {
|
|
12
|
+
if (isSelected) {
|
|
13
|
+
return {
|
|
14
|
+
borderWidth: theme.border.width.none,
|
|
15
|
+
backgroundColor: theme.color.background.disabledSecondary,
|
|
16
|
+
cursor: 'not-allowed',
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
return {
|
|
20
|
+
borderWidth: theme.border.width.sm,
|
|
21
|
+
borderColor: theme.color.border.disabled,
|
|
22
|
+
cursor: 'not-allowed',
|
|
23
|
+
backgroundColor: theme.color.background.disabled,
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
case isSelected: {
|
|
27
|
+
return {
|
|
28
|
+
borderWidth: theme.border.width.none,
|
|
29
|
+
backgroundColor: theme.color.background.primary,
|
|
30
|
+
cursor: 'pointer',
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
default: {
|
|
34
|
+
return {
|
|
35
|
+
borderWidth: theme.border.width.sm,
|
|
36
|
+
borderColor: theme.color.border.defaultDark,
|
|
37
|
+
backgroundColor: theme.color.background.neutral,
|
|
38
|
+
cursor: 'pointer',
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
}
|
|
14
42
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
background: checked
|
|
21
|
-
? disabled
|
|
22
|
-
? theme.color.background.disabledDark
|
|
23
|
-
: theme.color.background.primary
|
|
24
|
-
: theme.color.background.neutral,
|
|
25
|
-
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
26
|
-
}); };
|
|
27
|
-
var getCheckboxStyles = function (_a) {
|
|
28
|
-
var width = _a.width, height = _a.height, theme = _a.theme, checked = _a.checked, disabled = _a.disabled, rest = __rest(_a, ["width", "height", "theme", "checked", "disabled"]);
|
|
29
|
-
return (__assign(__assign({ position: 'absolute', left: 0, borderRadius: '4px', border: !checked
|
|
30
|
-
? "1px solid ".concat(disabled ? theme.color.border.disabledDark : theme.color.border.defaultDark)
|
|
31
|
-
: "1px solid transparent", width: width, height: height, display: 'flex', justifyContent: 'center', alignItems: 'center', marginRight: theme.spacing[3] }, getCheckboxColor(theme, !!disabled, !!checked)), rest));
|
|
43
|
+
const getLabelColor = (isDisabled) => {
|
|
44
|
+
if (isDisabled) {
|
|
45
|
+
return TypographyColor.DISABLED;
|
|
46
|
+
}
|
|
47
|
+
return TypographyColor.PRIMARY;
|
|
32
48
|
};
|
|
33
49
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
})
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
const webStaticStyles = {
|
|
51
|
+
disabledRoot: css({
|
|
52
|
+
cursor: 'not-allowed',
|
|
53
|
+
}),
|
|
54
|
+
};
|
|
55
|
+
const staticCheckboxStyles = makeStyles((theme) => ({
|
|
56
|
+
root: {
|
|
57
|
+
display: 'flex',
|
|
58
|
+
flexDirection: 'row',
|
|
59
|
+
alignItems: 'center',
|
|
60
|
+
gap: theme === null || theme === void 0 ? void 0 : theme.spacing[2],
|
|
61
|
+
cursor: 'pointer',
|
|
62
|
+
userSelect: 'none',
|
|
63
|
+
},
|
|
64
|
+
hiddenInput: {
|
|
65
|
+
position: 'absolute',
|
|
66
|
+
opacity: 0,
|
|
67
|
+
width: 0,
|
|
68
|
+
height: 0,
|
|
69
|
+
margin: 0,
|
|
70
|
+
padding: 0,
|
|
71
|
+
border: 'none',
|
|
72
|
+
pointerEvents: 'none',
|
|
73
|
+
},
|
|
74
|
+
checkboxIconContainer: {
|
|
75
|
+
width: theme === null || theme === void 0 ? void 0 : theme.spacing[5],
|
|
76
|
+
height: theme === null || theme === void 0 ? void 0 : theme.spacing[5],
|
|
77
|
+
borderRadius: theme === null || theme === void 0 ? void 0 : theme.border.radius[4],
|
|
78
|
+
borderStyle: theme === null || theme === void 0 ? void 0 : theme.border.style.solid,
|
|
79
|
+
display: 'flex',
|
|
80
|
+
alignItems: 'center',
|
|
81
|
+
justifyContent: 'center',
|
|
82
|
+
},
|
|
83
|
+
}));
|
|
84
|
+
const Checkbox = forwardRef(({ id, label, disabled = false, onChange, checked = false, styleConfig, isFullClickEnabled = true, rootProps = {} }, ref) => {
|
|
85
|
+
const dynamicStyles = useStyles((theme) => ({
|
|
86
|
+
checkboxIconContainer: getBorderStyles(theme, checked, disabled),
|
|
87
|
+
label: {
|
|
88
|
+
color: getLabelColor(disabled),
|
|
89
|
+
},
|
|
90
|
+
}), [checked, disabled]);
|
|
91
|
+
const { root: customRootStyles = [], checkboxIconContainer: customCheckboxIconStyles = [], labelContainer: customLabelContainerStyles = [], } = styleConfig || {};
|
|
92
|
+
const handleCheckboxChange = () => {
|
|
93
|
+
if (disabled)
|
|
94
|
+
return;
|
|
95
|
+
onChange === null || onChange === void 0 ? void 0 : onChange({ id, label, disabled, checked: !checked });
|
|
96
|
+
};
|
|
97
|
+
const handleRootClick = () => {
|
|
98
|
+
if (disabled || !isFullClickEnabled)
|
|
99
|
+
return;
|
|
100
|
+
handleCheckboxChange();
|
|
101
|
+
};
|
|
102
|
+
const handleIconClick = (event) => {
|
|
103
|
+
if (isFullClickEnabled)
|
|
104
|
+
return;
|
|
105
|
+
event.stopPropagation();
|
|
106
|
+
handleCheckboxChange();
|
|
53
107
|
};
|
|
54
|
-
|
|
108
|
+
const mergedRootClassName = useWebMergeStyles([staticCheckboxStyles.root, ...(disabled ? [webStaticStyles.disabledRoot] : []), ...customRootStyles], [disabled, customRootStyles]);
|
|
109
|
+
const mergedInputClassName = useWebMergeStyles([staticCheckboxStyles.hiddenInput], []);
|
|
110
|
+
const mergedCheckboxIconClassName = useWebMergeStyles([staticCheckboxStyles.checkboxIconContainer, dynamicStyles.checkboxIconContainer, ...customCheckboxIconStyles], [dynamicStyles.checkboxIconContainer, customCheckboxIconStyles]);
|
|
111
|
+
return (jsxs("div", Object.assign({ id: `${id}-root`, className: mergedRootClassName, onClick: handleRootClick }, rootProps, { children: [jsx("input", { ref: ref, id: id, type: 'checkbox', checked: checked, disabled: disabled, onChange: handleCheckboxChange, className: mergedInputClassName, "aria-labelledby": `${id}-label` }), jsx("span", { className: mergedCheckboxIconClassName, onClick: handleIconClick, children: checked && jsx(CheckboxTick, {}) }), jsx(Container, { styleConfig: { root: customLabelContainerStyles }, children: typeof label === 'string' ? (jsx(Typography, { variant: TypographyVariant.P2, styleConfig: { root: [dynamicStyles.label] }, children: label })) : (label) })] })));
|
|
55
112
|
});
|
|
113
|
+
Checkbox.displayName = 'Checkbox';
|
|
56
114
|
|
|
57
115
|
export { Checkbox };
|
|
58
116
|
//# sourceMappingURL=ct-design-checkbox.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-checkbox.esm.js","sources":["../packages/components/Checkbox/src/style.ts","../packages/components/Checkbox/src/Checkbox.tsx"],"sourcesContent":[null,null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ct-design-checkbox.esm.js","sources":["../packages/components/Checkbox/src/style.ts","../packages/components/Checkbox/src/Checkbox.tsx"],"sourcesContent":[null,null],"names":["_jsxs","_jsx"],"mappings":"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"}
|