@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
76 lines (75 loc) • 3.33 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioGroup = exports.useRadioContext = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
const RadioContext = React.createContext({
value: null,
name: '',
onChange: (v) => { },
});
const useRadioContext = () => {
return React.useContext(RadioContext);
};
exports.useRadioContext = useRadioContext;
const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, childrenPosition = 'end', as = 'label', id, tabIndex, disabled, ...props }) => {
const context = (0, exports.useRadioContext)();
const { value: contextValue, onChange: contextOnChange, name: contextName } = context;
const [stateChecked, setStateChecked] = (0, react_1.useState)(false);
const computedChecked = checked !== undefined
? checked
: contextValue !== undefined
? contextValue === value
: stateChecked;
const onInputChange = (event) => {
const newChecked = event.target.checked;
if (checked === undefined) {
setStateChecked(newChecked);
}
if (onChange) {
onChange(newChecked, event);
}
if (newChecked) {
contextOnChange(value);
}
};
const gap = React.createElement("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
const before = childrenPosition === 'start' ? children : null;
const beforeGap = childrenPosition === 'start' ? gap : null;
const after = childrenPosition === 'end' ? children : null;
const afterGap = childrenPosition === 'end' ? gap : null;
return (React.createElement(rebass_1.Box, { className: "ab-Radio", my: 2, ...props, style: {
display: 'inline-flex',
flexFlow: 'row',
alignItems: 'center',
cursor: 'pointer',
position: 'relative',
...props.style,
}, as: as },
before,
beforeGap,
React.createElement("input", { disabled: disabled, className: "ab-Radio-input", id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, style: {
verticalAlign: 'middle',
margin: '0px',
borderRadius: '50%',
cursor: 'pointer',
position: 'relative',
}, onChange: onInputChange }),
afterGap,
after));
};
const RadioGroup = (props) => {
const { orientation, value: _value, name, onRadioChange, ...flexProps } = props;
const [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
onChange: (value) => {
onRadioChange(value);
},
});
return (React.createElement(RadioContext.Provider, { value: { value, onChange: setValue, name } },
React.createElement(rebass_1.Flex, { className: "ab-RadioGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start', ...flexProps })));
};
exports.RadioGroup = RadioGroup;
exports.default = Radio;