103 lines
3.8 KiB
JavaScript
103 lines
3.8 KiB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
import 'react';
|
|
import { Field, Flex, VisuallyHidden } from '@strapi/design-system';
|
|
import { styled } from 'styled-components';
|
|
|
|
const getBorderLeftRadiusValue = (actionType)=>{
|
|
return actionType === 'publish' ? 1 : 0;
|
|
};
|
|
const getBorderRightRadiusValue = (actionType)=>{
|
|
return actionType === 'publish' ? 0 : 1;
|
|
};
|
|
const FieldWrapper = styled(Field.Root)`
|
|
border-top-left-radius: ${({ $actionType, theme })=>theme.spaces[getBorderLeftRadiusValue($actionType)]};
|
|
border-bottom-left-radius: ${({ $actionType, theme })=>theme.spaces[getBorderLeftRadiusValue($actionType)]};
|
|
border-top-right-radius: ${({ $actionType, theme })=>theme.spaces[getBorderRightRadiusValue($actionType)]};
|
|
border-bottom-right-radius: ${({ $actionType, theme })=>theme.spaces[getBorderRightRadiusValue($actionType)]};
|
|
|
|
> label {
|
|
color: inherit;
|
|
padding: ${({ theme })=>`${theme.spaces[2]} ${theme.spaces[3]}`};
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
&[data-checked='true'] {
|
|
color: ${({ theme, $actionType })=>$actionType === 'publish' ? theme.colors.primary700 : theme.colors.danger600};
|
|
background-color: ${({ theme, $actionType })=>$actionType === 'publish' ? theme.colors.primary100 : theme.colors.danger100};
|
|
border-color: ${({ theme, $actionType })=>$actionType === 'publish' ? theme.colors.primary700 : theme.colors.danger600};
|
|
}
|
|
|
|
&[data-checked='false'] {
|
|
border-left: ${({ $actionType })=>$actionType === 'unpublish' && 'none'};
|
|
border-right: ${({ $actionType })=>$actionType === 'publish' && 'none'};
|
|
}
|
|
|
|
&[data-checked='false'][data-disabled='false']:hover {
|
|
color: ${({ theme })=>theme.colors.neutral700};
|
|
background-color: ${({ theme })=>theme.colors.neutral100};
|
|
border-color: ${({ theme })=>theme.colors.neutral200};
|
|
|
|
& > label {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&[data-disabled='true'] {
|
|
color: ${({ theme })=>theme.colors.neutral600};
|
|
background-color: ${({ theme })=>theme.colors.neutral150};
|
|
border-color: ${({ theme })=>theme.colors.neutral300};
|
|
}
|
|
`;
|
|
const ActionOption = ({ selected, actionType, handleChange, name, disabled = false })=>{
|
|
return /*#__PURE__*/ jsx(FieldWrapper, {
|
|
$actionType: actionType,
|
|
background: "primary0",
|
|
borderColor: "neutral200",
|
|
color: selected === actionType ? 'primary600' : 'neutral600',
|
|
position: "relative",
|
|
cursor: "pointer",
|
|
"data-checked": selected === actionType,
|
|
"data-disabled": disabled && selected !== actionType,
|
|
children: /*#__PURE__*/ jsxs(Field.Label, {
|
|
children: [
|
|
/*#__PURE__*/ jsx(VisuallyHidden, {
|
|
children: /*#__PURE__*/ jsx(Field.Input, {
|
|
type: "radio",
|
|
name: name,
|
|
checked: selected === actionType,
|
|
onChange: handleChange,
|
|
value: actionType,
|
|
disabled: disabled
|
|
})
|
|
}),
|
|
actionType
|
|
]
|
|
})
|
|
});
|
|
};
|
|
const ReleaseActionOptions = ({ selected, handleChange, name, disabled = false })=>{
|
|
return /*#__PURE__*/ jsxs(Flex, {
|
|
children: [
|
|
/*#__PURE__*/ jsx(ActionOption, {
|
|
actionType: "publish",
|
|
selected: selected,
|
|
handleChange: handleChange,
|
|
name: name,
|
|
disabled: disabled
|
|
}),
|
|
/*#__PURE__*/ jsx(ActionOption, {
|
|
actionType: "unpublish",
|
|
selected: selected,
|
|
handleChange: handleChange,
|
|
name: name,
|
|
disabled: disabled
|
|
})
|
|
]
|
|
});
|
|
};
|
|
|
|
export { ReleaseActionOptions };
|
|
//# sourceMappingURL=ReleaseActionOptions.mjs.map
|