@chayns-components/core 5.0.0-beta.782 → 5.0.0-beta.783
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/lib/cjs/components/radio-button/RadioButton.js +4 -20
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js +12 -4
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js +5 -21
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js +12 -4
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/types/components/radio-button/RadioButton.d.ts +0 -10
- package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts +12 -1
- package/package.json +2 -2
|
@@ -12,12 +12,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
12
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
13
|
const RadioButton = ({
|
|
14
14
|
children,
|
|
15
|
-
isChecked,
|
|
16
15
|
label,
|
|
17
|
-
onChange,
|
|
18
16
|
id,
|
|
19
|
-
isDisabled = false
|
|
20
|
-
canBeUnchecked
|
|
17
|
+
isDisabled = false
|
|
21
18
|
}) => {
|
|
22
19
|
const {
|
|
23
20
|
selectedRadioButtonId,
|
|
@@ -28,27 +25,14 @@ const RadioButton = ({
|
|
|
28
25
|
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
29
26
|
const isInGroup = typeof updateSelectedRadioButtonId === 'function';
|
|
30
27
|
const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
|
|
31
|
-
const uncheckable =
|
|
32
|
-
const isInitialRenderRef = (0, _react.useRef)(true);
|
|
28
|
+
const uncheckable = radioButtonsCanBeUnchecked;
|
|
33
29
|
(0, _react.useEffect)(() => {
|
|
34
|
-
if (
|
|
30
|
+
if (selectedRadioButtonId === id) {
|
|
35
31
|
if (typeof updateSelectedRadioButtonId === 'function') {
|
|
36
32
|
updateSelectedRadioButtonId(id);
|
|
37
|
-
} else {
|
|
38
|
-
setInternalIsChecked(isChecked);
|
|
39
33
|
}
|
|
40
34
|
}
|
|
41
|
-
}, [id,
|
|
42
|
-
(0, _react.useEffect)(() => {
|
|
43
|
-
if (isInitialRenderRef.current) {
|
|
44
|
-
isInitialRenderRef.current = false;
|
|
45
|
-
} else if (typeof onChange === 'function') {
|
|
46
|
-
onChange({
|
|
47
|
-
isChecked: isMarked,
|
|
48
|
-
id
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
}, [id, isMarked, onChange]);
|
|
35
|
+
}, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
52
36
|
const handleClick = (0, _react.useCallback)(() => {
|
|
53
37
|
if (isDisabled) {
|
|
54
38
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButton","children","isChecked","label","onChange","id","isDisabled","canBeUnchecked","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","isInitialRenderRef","useRef","useEffect","current","handleClick","useCallback","undefined","prev","handleMouseEnter","handleMouseLeave","useMemo","createElement","StyledRadioButton","$isDisabled","onMouseEnter","onMouseLeave","StyledRadioButtonWrapper","onClick","StyledRadioButtonPseudoCheckBox","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonCheckBox","disabled","type","checked","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","height","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from 'react';\nimport type { RadioButtonItem } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * Whether the radio button should be checked.\n */\n isChecked?: boolean;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: string;\n /**\n * Function to be executed when a button is checked.\n */\n onChange?: (item: RadioButtonItem) => void;\n\n canBeUnchecked?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n isChecked,\n label,\n onChange,\n id,\n isDisabled = false,\n canBeUnchecked,\n}) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId, radioButtonsCanBeUnchecked } =\n useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = isInGroup ? radioButtonsCanBeUnchecked : canBeUnchecked;\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n if (typeof isChecked === 'boolean' && isChecked) {\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n } else {\n setInternalIsChecked(isChecked);\n }\n }\n }, [id, isChecked, updateSelectedRadioButtonId]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof onChange === 'function') {\n onChange({ isChecked: isMarked, id });\n }\n }, [id, isMarked, onChange]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <StyledRadioButtonWrapper $isDisabled={isDisabled} onClick={handleClick}>\n <StyledRadioButtonPseudoCheckBox $isDisabled={isDisabled} $isChecked={isMarked}>\n <StyledRadioButtonCheckBoxMark\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledRadioButtonCheckBox\n disabled={isDisabled}\n $isDisabled={isDisabled}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButton","children","label","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","useEffect","handleClick","useCallback","undefined","prev","handleMouseEnter","handleMouseLeave","useMemo","createElement","StyledRadioButton","$isDisabled","onMouseEnter","onMouseLeave","StyledRadioButtonWrapper","onClick","StyledRadioButtonPseudoCheckBox","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonCheckBox","disabled","type","checked","onChange","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","height","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: string;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({ children, label, id, isDisabled = false }) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId, radioButtonsCanBeUnchecked } =\n useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = radioButtonsCanBeUnchecked;\n\n useEffect(() => {\n if (selectedRadioButtonId === id) {\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n }\n }, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <StyledRadioButtonWrapper $isDisabled={isDisabled} onClick={handleClick}>\n <StyledRadioButtonPseudoCheckBox $isDisabled={isDisabled} $isChecked={isMarked}>\n <StyledRadioButtonCheckBoxMark\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledRadioButtonCheckBox\n disabled={isDisabled}\n $isDisabled={isDisabled}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -15,13 +15,21 @@ const RadioButtonGroupContext = exports.RadioButtonGroupContext = /*#__PURE__*/_
|
|
|
15
15
|
RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
|
|
16
16
|
const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
17
17
|
children,
|
|
18
|
-
|
|
18
|
+
canUncheckRadioButtons,
|
|
19
|
+
selectedId,
|
|
20
|
+
onSelect
|
|
19
21
|
}, ref) => {
|
|
20
22
|
const [selectedRadioButtonId, setSelectedRadioButtonId] = (0, _react.useState)(undefined);
|
|
21
23
|
const isInitialRenderRef = (0, _react.useRef)(true);
|
|
24
|
+
(0, _react.useEffect)(() => {
|
|
25
|
+
setSelectedRadioButtonId(selectedId);
|
|
26
|
+
}, [selectedId]);
|
|
22
27
|
const updateSelectedRadioButtonId = (0, _react.useCallback)(id => {
|
|
28
|
+
if (typeof onSelect === 'function') {
|
|
29
|
+
onSelect(id);
|
|
30
|
+
}
|
|
23
31
|
setSelectedRadioButtonId(id);
|
|
24
|
-
}, []);
|
|
32
|
+
}, [onSelect]);
|
|
25
33
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
26
34
|
updateSelectedRadioButtonId
|
|
27
35
|
}), [updateSelectedRadioButtonId]);
|
|
@@ -33,8 +41,8 @@ const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
33
41
|
const providerValue = (0, _react.useMemo)(() => ({
|
|
34
42
|
selectedRadioButtonId,
|
|
35
43
|
updateSelectedRadioButtonId,
|
|
36
|
-
|
|
37
|
-
}), [
|
|
44
|
+
canUncheckRadioButtons
|
|
45
|
+
}), [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
38
46
|
return /*#__PURE__*/_react.default.createElement(RadioButtonGroupContext.Provider, {
|
|
39
47
|
value: providerValue
|
|
40
48
|
}, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButtonGroupContext","exports","React","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","forwardRef","children","ref","setSelectedRadioButtonId","useState","isInitialRenderRef","useRef","useCallback","id","useImperativeHandle","
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","RadioButtonGroupContext","exports","React","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","forwardRef","children","canUncheckRadioButtons","selectedId","onSelect","ref","setSelectedRadioButtonId","useState","isInitialRenderRef","useRef","useEffect","useCallback","id","useImperativeHandle","current","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /**\n * Whether the RadioButtons can be unchecked.\n */\n canUncheckRadioButtons?: boolean;\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n /**\n * Function to be executed when an id is selected.\n */\n onSelect?: (id?: string) => void;\n /**\n * The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, canUncheckRadioButtons, selectedId, onSelect }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n setSelectedRadioButtonId(id);\n },\n [onSelect],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n }\n }, [selectedRadioButtonId]);\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n canUncheckRadioButtons,\n }),\n [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import { AnimatePresence } from 'framer-motion';
|
|
2
|
-
import React, { useCallback, useContext, useEffect, useMemo,
|
|
2
|
+
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';
|
|
4
4
|
import { StyledMotionRadioButtonChildren, StyledRadioButton, StyledRadioButtonCheckBox, StyledRadioButtonCheckBoxMark, StyledRadioButtonLabel, StyledRadioButtonPseudoCheckBox, StyledRadioButtonWrapper } from './RadioButton.styles';
|
|
5
5
|
const RadioButton = _ref => {
|
|
6
6
|
let {
|
|
7
7
|
children,
|
|
8
|
-
isChecked,
|
|
9
8
|
label,
|
|
10
|
-
onChange,
|
|
11
9
|
id,
|
|
12
|
-
isDisabled = false
|
|
13
|
-
canBeUnchecked
|
|
10
|
+
isDisabled = false
|
|
14
11
|
} = _ref;
|
|
15
12
|
const {
|
|
16
13
|
selectedRadioButtonId,
|
|
@@ -21,27 +18,14 @@ const RadioButton = _ref => {
|
|
|
21
18
|
const [isHovered, setIsHovered] = useState(false);
|
|
22
19
|
const isInGroup = typeof updateSelectedRadioButtonId === 'function';
|
|
23
20
|
const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;
|
|
24
|
-
const uncheckable =
|
|
25
|
-
const isInitialRenderRef = useRef(true);
|
|
21
|
+
const uncheckable = radioButtonsCanBeUnchecked;
|
|
26
22
|
useEffect(() => {
|
|
27
|
-
if (
|
|
23
|
+
if (selectedRadioButtonId === id) {
|
|
28
24
|
if (typeof updateSelectedRadioButtonId === 'function') {
|
|
29
25
|
updateSelectedRadioButtonId(id);
|
|
30
|
-
} else {
|
|
31
|
-
setInternalIsChecked(isChecked);
|
|
32
26
|
}
|
|
33
27
|
}
|
|
34
|
-
}, [id,
|
|
35
|
-
useEffect(() => {
|
|
36
|
-
if (isInitialRenderRef.current) {
|
|
37
|
-
isInitialRenderRef.current = false;
|
|
38
|
-
} else if (typeof onChange === 'function') {
|
|
39
|
-
onChange({
|
|
40
|
-
isChecked: isMarked,
|
|
41
|
-
id
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
}, [id, isMarked, onChange]);
|
|
28
|
+
}, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
45
29
|
const handleClick = useCallback(() => {
|
|
46
30
|
if (isDisabled) {
|
|
47
31
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useState","RadioButtonGroupContext","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","RadioButton","_ref","children","label","id","isDisabled","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","isInGroup","isMarked","uncheckable","handleClick","undefined","prev","handleMouseEnter","handleMouseLeave","createElement","$isDisabled","onMouseEnter","onMouseLeave","onClick","$isChecked","$isHovered","$isSelected","disabled","type","checked","onChange","initial","animate","opacity","height","transition","duration","displayName"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: string;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({ children, label, id, isDisabled = false }) => {\n const { selectedRadioButtonId, updateSelectedRadioButtonId, radioButtonsCanBeUnchecked } =\n useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = radioButtonsCanBeUnchecked;\n\n useEffect(() => {\n if (selectedRadioButtonId === id) {\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n }\n }, [id, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <StyledRadioButtonWrapper $isDisabled={isDisabled} onClick={handleClick}>\n <StyledRadioButtonPseudoCheckBox $isDisabled={isDisabled} $isChecked={isMarked}>\n <StyledRadioButtonCheckBoxMark\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledRadioButtonCheckBox\n disabled={isDisabled}\n $isDisabled={isDisabled}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n {label && <StyledRadioButtonLabel>{label}</StyledRadioButtonLabel>}\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [children, handleClick, handleMouseEnter, isDisabled, isHovered, isMarked, label],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,13 +8,21 @@ RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
|
|
|
8
8
|
const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
9
9
|
let {
|
|
10
10
|
children,
|
|
11
|
-
|
|
11
|
+
canUncheckRadioButtons,
|
|
12
|
+
selectedId,
|
|
13
|
+
onSelect
|
|
12
14
|
} = _ref;
|
|
13
15
|
const [selectedRadioButtonId, setSelectedRadioButtonId] = useState(undefined);
|
|
14
16
|
const isInitialRenderRef = useRef(true);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
setSelectedRadioButtonId(selectedId);
|
|
19
|
+
}, [selectedId]);
|
|
15
20
|
const updateSelectedRadioButtonId = useCallback(id => {
|
|
21
|
+
if (typeof onSelect === 'function') {
|
|
22
|
+
onSelect(id);
|
|
23
|
+
}
|
|
16
24
|
setSelectedRadioButtonId(id);
|
|
17
|
-
}, []);
|
|
25
|
+
}, [onSelect]);
|
|
18
26
|
useImperativeHandle(ref, () => ({
|
|
19
27
|
updateSelectedRadioButtonId
|
|
20
28
|
}), [updateSelectedRadioButtonId]);
|
|
@@ -26,8 +34,8 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
26
34
|
const providerValue = useMemo(() => ({
|
|
27
35
|
selectedRadioButtonId,
|
|
28
36
|
updateSelectedRadioButtonId,
|
|
29
|
-
|
|
30
|
-
}), [
|
|
37
|
+
canUncheckRadioButtons
|
|
38
|
+
}), [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId]);
|
|
31
39
|
return /*#__PURE__*/React.createElement(RadioButtonGroupContext.Provider, {
|
|
32
40
|
value: providerValue
|
|
33
41
|
}, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","_ref","ref","children","setSelectedRadioButtonId","isInitialRenderRef","id","current","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","displayName","RadioButtonGroup","_ref","ref","children","canUncheckRadioButtons","selectedId","onSelect","setSelectedRadioButtonId","isInitialRenderRef","id","current","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonsCanBeUnchecked?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupRef = {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n};\n\nexport type RadioButtonGroupProps = {\n /**\n * Whether the RadioButtons can be unchecked.\n */\n canUncheckRadioButtons?: boolean;\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n /**\n * Function to be executed when an id is selected.\n */\n onSelect?: (id?: string) => void;\n /**\n * The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n ({ children, canUncheckRadioButtons, selectedId, onSelect }, ref) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\n const isInitialRenderRef = useRef(true);\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n setSelectedRadioButtonId(id);\n },\n [onSelect],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n }\n }, [selectedRadioButtonId]);\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n canUncheckRadioButtons,\n }),\n [canUncheckRadioButtons, selectedRadioButtonId, updateSelectedRadioButtonId],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,UAAU,EAEVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AAUd,OAAO,MAAMC,uBAAuB,gBAAGR,KAAK,CAACS,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED,SAAS;EACtCE,0BAA0B,EAAE;AAChC,CAAC,CAAC;AAEFL,uBAAuB,CAACM,WAAW,GAAG,yBAAyB;AA0B/D,MAAMC,gBAAgB,gBAAGd,UAAU,CAC/B,CAAAe,IAAA,EAA6DC,GAAG,KAAK;EAAA,IAApE;IAAEC,QAAQ;IAAEC,sBAAsB;IAAEC,UAAU;IAAEC;EAAS,CAAC,GAAAL,IAAA;EACvD,MAAM,CAACN,qBAAqB,EAAEY,wBAAwB,CAAC,GACnDf,QAAQ,CAAoDI,SAAS,CAAC;EAE1E,MAAMY,kBAAkB,GAAGjB,MAAM,CAAC,IAAI,CAAC;EAEvCH,SAAS,CAAC,MAAM;IACZmB,wBAAwB,CAACF,UAAU,CAAC;EACxC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMR,2BAA2B,GAAGV,WAAW,CAC1CsB,EAAE,IAAK;IACJ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACG,EAAE,CAAC;IAChB;IAEAF,wBAAwB,CAACE,EAAE,CAAC;EAChC,CAAC,EACD,CAACH,QAAQ,CACb,CAAC;EAEDjB,mBAAmB,CACfa,GAAG,EACH,OAAO;IACHL;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAEDT,SAAS,CAAC,MAAM;IACZ,IAAIoB,kBAAkB,CAACE,OAAO,EAAE;MAC5BF,kBAAkB,CAACE,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,CAACf,qBAAqB,CAAC,CAAC;EAE3B,MAAMgB,aAAa,GAAGrB,OAAO,CACzB,OAAO;IACHK,qBAAqB;IACrBE,2BAA2B;IAC3BO;EACJ,CAAC,CAAC,EACF,CAACA,sBAAsB,EAAET,qBAAqB,EAAEE,2BAA2B,CAC/E,CAAC;EAED,oBACIZ,KAAA,CAAA2B,aAAA,CAACnB,uBAAuB,CAACoB,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAClDR,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDH,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}
|
|
@@ -1,14 +1,9 @@
|
|
|
1
1
|
import { FC, type ReactNode } from 'react';
|
|
2
|
-
import type { RadioButtonItem } from '../../types/radioButton';
|
|
3
2
|
export type RadioButtonProps = {
|
|
4
3
|
/**
|
|
5
4
|
* The children that should be displayed after the RadioButton is checked.
|
|
6
5
|
*/
|
|
7
6
|
children?: ReactNode;
|
|
8
|
-
/**
|
|
9
|
-
* Whether the radio button should be checked.
|
|
10
|
-
*/
|
|
11
|
-
isChecked?: boolean;
|
|
12
7
|
/**
|
|
13
8
|
* whether the RadioButton should be shown.
|
|
14
9
|
*/
|
|
@@ -21,11 +16,6 @@ export type RadioButtonProps = {
|
|
|
21
16
|
* The label that should be displayed next to the radio button.
|
|
22
17
|
*/
|
|
23
18
|
label?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Function to be executed when a button is checked.
|
|
26
|
-
*/
|
|
27
|
-
onChange?: (item: RadioButtonItem) => void;
|
|
28
|
-
canBeUnchecked?: boolean;
|
|
29
19
|
};
|
|
30
20
|
declare const RadioButton: FC<RadioButtonProps>;
|
|
31
21
|
export default RadioButton;
|
|
@@ -10,12 +10,23 @@ export type RadioButtonGroupRef = {
|
|
|
10
10
|
updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;
|
|
11
11
|
};
|
|
12
12
|
export type RadioButtonGroupProps = {
|
|
13
|
+
/**
|
|
14
|
+
* Whether the RadioButtons can be unchecked.
|
|
15
|
+
*/
|
|
16
|
+
canUncheckRadioButtons?: boolean;
|
|
13
17
|
/**
|
|
14
18
|
* The RadioButtons that should be grouped. Radio buttons with the same group are
|
|
15
19
|
* automatically unchecked when an `RadioButton` of the group is checked.
|
|
16
20
|
*/
|
|
17
21
|
children: ReactNode;
|
|
18
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Function to be executed when an id is selected.
|
|
24
|
+
*/
|
|
25
|
+
onSelect?: (id?: string) => void;
|
|
26
|
+
/**
|
|
27
|
+
* The id of the current selected RadioButton.
|
|
28
|
+
*/
|
|
29
|
+
selectedId?: string;
|
|
19
30
|
};
|
|
20
31
|
declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<RadioButtonGroupRef>>;
|
|
21
32
|
export default RadioButtonGroup;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.783",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "39bd8d3f940834efdbc9fd2cd19f8148821ad86f"
|
|
89
89
|
}
|