79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
|
import React from "react";
|
||
|
|
import BaseControl, { ControlProps } from "./BaseControl";
|
||
|
|
import { FlexWrapper } from "./StyledControls";
|
||
|
|
import styled from "styled-components";
|
||
|
|
import { ControlIcons, ControlIconName } from "icons/ControlIcons";
|
||
|
|
import { Colors } from "constants/Colors";
|
||
|
|
import produce from "immer";
|
||
|
|
|
||
|
|
const ItemWrapper = styled.div<{ selected: boolean }>`
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background: ${(props) => (props.selected ? "#29CCA3" : "#21282C")};
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
&:first-of-type {
|
||
|
|
margin-right: 4px;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
class ButtonTabControl extends BaseControl<ButtonTabControlProps> {
|
||
|
|
selectButton = (value: string) => {
|
||
|
|
const { propertyValue, defaultValue } = this.props;
|
||
|
|
const values: string[] = propertyValue
|
||
|
|
? propertyValue.split(",")
|
||
|
|
: defaultValue
|
||
|
|
? defaultValue.split(",")
|
||
|
|
: [];
|
||
|
|
if (values.includes(value)) {
|
||
|
|
values.splice(values.indexOf(value), 1);
|
||
|
|
this.updateProperty(this.props.propertyName, values.join(","));
|
||
|
|
} else {
|
||
|
|
const updatedValues: string[] = produce(values, (draft: string[]) => {
|
||
|
|
draft.push(value);
|
||
|
|
});
|
||
|
|
this.updateProperty(this.props.propertyName, updatedValues.join(","));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
render() {
|
||
|
|
const { propertyValue, options } = this.props;
|
||
|
|
return (
|
||
|
|
<FlexWrapper>
|
||
|
|
{options.map((option, index) => {
|
||
|
|
const controlIconName: ControlIconName = option.icon;
|
||
|
|
const ControlIcon = ControlIcons[controlIconName];
|
||
|
|
return (
|
||
|
|
<ItemWrapper
|
||
|
|
key={index}
|
||
|
|
selected={propertyValue && propertyValue.includes(option.value)}
|
||
|
|
onClick={() => this.selectButton(option.value)}
|
||
|
|
className={`t--button-tab-${option.value}`}
|
||
|
|
>
|
||
|
|
<ControlIcon color={Colors.WHITE} width={24} height={24} />
|
||
|
|
</ItemWrapper>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</FlexWrapper>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
static getControlType() {
|
||
|
|
return "BUTTON_TABS";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ButtonTabOption {
|
||
|
|
icon: string;
|
||
|
|
value: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface ButtonTabControlProps extends ControlProps {
|
||
|
|
options: ButtonTabOption[];
|
||
|
|
defaultValue: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ButtonTabControl;
|