7fd89678b7
# Introduction Avoid having multiple `isDefined` definition across our pacakges Also avoid importing `isDefined` from `twenty-ui` which exposes a huge barrel for a such little util function ## In a nutshell Removed own `isDefined.ts` definition from `twenty-ui` `twenty-front` and `twenty-server` to move it to `twenty-shared`. Updated imports for each packages, and added explicit dependencies to `twenty-shared` if not already in place Related PR https://github.com/twentyhq/twenty/pull/9941
60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import React, { ReactNode } from 'react';
|
|
|
|
import { isDefined } from 'twenty-shared';
|
|
|
|
import { ButtonPosition, ButtonProps } from './Button';
|
|
|
|
const StyledButtonGroupContainer = styled.div`
|
|
border-radius: ${({ theme }) => theme.border.radius.md};
|
|
display: flex;
|
|
`;
|
|
|
|
export type ButtonGroupProps = Pick<
|
|
ButtonProps,
|
|
'variant' | 'size' | 'accent'
|
|
> & {
|
|
className?: string;
|
|
children: ReactNode[];
|
|
};
|
|
|
|
export const ButtonGroup = ({
|
|
className,
|
|
children,
|
|
variant,
|
|
size,
|
|
accent,
|
|
}: ButtonGroupProps) => (
|
|
<StyledButtonGroupContainer className={className}>
|
|
{React.Children.map(children, (child, index) => {
|
|
if (!React.isValidElement(child)) return null;
|
|
|
|
let position: ButtonPosition;
|
|
|
|
if (index === 0) {
|
|
position = 'left';
|
|
} else if (index === children.length - 1) {
|
|
position = 'right';
|
|
} else {
|
|
position = 'middle';
|
|
}
|
|
|
|
const additionalProps: any = { position, variant, accent, size };
|
|
|
|
if (isDefined(variant)) {
|
|
additionalProps.variant = variant;
|
|
}
|
|
|
|
if (isDefined(accent)) {
|
|
additionalProps.variant = variant;
|
|
}
|
|
|
|
if (isDefined(size)) {
|
|
additionalProps.size = size;
|
|
}
|
|
|
|
return React.cloneElement(child, additionalProps);
|
|
})}
|
|
</StyledButtonGroupContainer>
|
|
);
|