39aa4e6d8d
* checkbox and button default styling * rate widget disabled styling * added cursor: not-allowed to disable css
85 lines
2.2 KiB
TypeScript
85 lines
2.2 KiB
TypeScript
import * as React from "react";
|
|
import styled from "styled-components";
|
|
|
|
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
|
|
import { generateReactKey } from "utils/generators";
|
|
import { StyledCheckbox } from "components/designSystems/blueprint/CheckboxComponent";
|
|
import { ThemeProp } from "components/ads/common";
|
|
|
|
export interface CheckboxGroupContainerProps {
|
|
inline?: boolean;
|
|
valid?: boolean;
|
|
}
|
|
|
|
const CheckboxGroupContainer = styled.div<
|
|
ThemeProp & CheckboxGroupContainerProps
|
|
>`
|
|
display: flex;
|
|
${({ inline }) => `
|
|
flex-direction: ${inline ? "row" : "column"};
|
|
align-items: ${inline ? "center" : "flex-start"};
|
|
${inline && "flex-wrap: wrap"};
|
|
`}
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
border: 1px solid transparent;
|
|
${({ theme, valid }) =>
|
|
!valid &&
|
|
`
|
|
border: 1px solid ${theme.colors.error};
|
|
`}
|
|
padding: 2px 4px;
|
|
`;
|
|
|
|
export interface OptionProps {
|
|
/** Label text for this option. If omitted, `value` is used as the label. */
|
|
label?: string;
|
|
|
|
/** Value of this option. */
|
|
value: string;
|
|
}
|
|
|
|
export interface CheckboxGroupComponentProps extends ComponentProps {
|
|
isDisabled?: boolean;
|
|
isInline?: boolean;
|
|
isRequired?: boolean;
|
|
isValid?: boolean;
|
|
onChange: (value: string) => React.FormEventHandler<HTMLInputElement>;
|
|
options: OptionProps[];
|
|
rowSpace: number;
|
|
selectedValues: string[];
|
|
}
|
|
function CheckboxGroupComponent(props: CheckboxGroupComponentProps) {
|
|
const {
|
|
isDisabled,
|
|
isInline,
|
|
isValid,
|
|
onChange,
|
|
options,
|
|
rowSpace,
|
|
selectedValues,
|
|
} = props;
|
|
|
|
return (
|
|
<CheckboxGroupContainer inline={isInline} valid={isValid}>
|
|
{options &&
|
|
options.length > 0 &&
|
|
[...options].map((option: OptionProps) => (
|
|
<StyledCheckbox
|
|
checked={(selectedValues || []).includes(option.value)}
|
|
disabled={isDisabled}
|
|
inline={isInline}
|
|
key={generateReactKey()}
|
|
label={option.label}
|
|
onChange={onChange(option.value)}
|
|
rowSpace={rowSpace}
|
|
/>
|
|
))}
|
|
</CheckboxGroupContainer>
|
|
);
|
|
}
|
|
|
|
export default CheckboxGroupComponent;
|