feat(segmentation mode): Add create, and export SEG with Brushes (#3632)
This commit is contained in:
Alireza authored and GitHub committed
1 parent
896866e9d0
commit
48bbd6281a
186 files changed
+6801
-2883
No files matched your search
@@ -1,150 +1,63 @@
|
||||
import React, { useRef } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
const baseButtonClass = 'border outline-none';
|
||||
const roundedClasses = {
|
||||
vertical: {
|
||||
none: '',
|
||||
small: 'first:rounded-t last:rounded-b',
|
||||
medium: 'first:rounded-t-md last:rounded-b-md',
|
||||
large: 'first:rounded-t-lg last:rounded-b-lg',
|
||||
full: 'first:rounded-t-full last:rounded-b-full',
|
||||
},
|
||||
horizontal: {
|
||||
none: '',
|
||||
small: 'first:rounded-l last:rounded-r',
|
||||
medium: 'first:rounded-l-md last:rounded-r-md',
|
||||
large: 'first:rounded-l-lg last:rounded-r-lg',
|
||||
full: 'first:rounded-l-full last:rounded-r-full',
|
||||
},
|
||||
};
|
||||
|
||||
const borderClasses = {
|
||||
text: {
|
||||
vertical: 'border-t-0 border-l-0 border-r-0 last:border-b-0',
|
||||
horizontal: 'border-l-0 border-t-0 border-b-0 last:border-r-0',
|
||||
},
|
||||
outlined: {
|
||||
vertical: 'border border-b-0 last:border-b',
|
||||
horizontal: 'border border-r-0 last:border-r',
|
||||
},
|
||||
contained: {
|
||||
vertical: 'border-t-0 border-l-0 border-r-0 last:border-b-0',
|
||||
horizontal: 'border-l-0 border-t-0 border-b-0 last:border-r-0',
|
||||
},
|
||||
};
|
||||
|
||||
const variantClasses = {
|
||||
text: {
|
||||
default: 'border-primary-light',
|
||||
primary: 'border-primary-main',
|
||||
secondary: 'border-secondary-light',
|
||||
white: 'border-white',
|
||||
black: 'border-primary-main',
|
||||
},
|
||||
outlined: {
|
||||
default: '',
|
||||
primary: '',
|
||||
secondary: 'border border-secondary-light',
|
||||
white: '',
|
||||
black: 'border-primary-main group-hover:bg-primary-main group-hover:border-black',
|
||||
},
|
||||
contained: {
|
||||
default: 'border-white',
|
||||
primary: 'border-white',
|
||||
secondary: 'border-white',
|
||||
white: 'border-black',
|
||||
black: 'border-primary-main',
|
||||
},
|
||||
};
|
||||
|
||||
const orientationClasses = {
|
||||
vertical: 'flex-col',
|
||||
horizontal: 'flex-row',
|
||||
};
|
||||
|
||||
const baseDisplayClass = 'inline-flex';
|
||||
const fullWidthDisplayClass = 'flex';
|
||||
|
||||
// css class that are applied for buttons that not the first or last
|
||||
const nonFirstLastClasses = {
|
||||
vertical: 'border-t-0 border-b-0',
|
||||
horizontal: 'border-l-0 last:border-r-0',
|
||||
};
|
||||
import { ButtonEnums } from '../../components';
|
||||
|
||||
const ButtonGroup = ({
|
||||
children,
|
||||
buttons,
|
||||
onActiveIndexChange,
|
||||
className,
|
||||
disabled = false,
|
||||
fullWidth = false,
|
||||
color = 'default',
|
||||
orientation = 'horizontal',
|
||||
rounded = 'medium',
|
||||
size = 'medium',
|
||||
variant = 'outlined',
|
||||
splitBorder = true,
|
||||
...other
|
||||
orientation = ButtonEnums.orientation.horizontal,
|
||||
defaultActiveIndex = 0,
|
||||
}) => {
|
||||
const ref = useRef(null);
|
||||
const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
|
||||
|
||||
const buttonClasses = classnames(
|
||||
baseButtonClass,
|
||||
borderClasses[variant] && borderClasses[variant][orientation],
|
||||
variantClasses[variant] && variantClasses[variant][color],
|
||||
roundedClasses[orientation] && roundedClasses[orientation][rounded]
|
||||
);
|
||||
const handleButtonClick = (e, index) => {
|
||||
setActiveIndex(index);
|
||||
onActiveIndexChange && onActiveIndexChange(index);
|
||||
buttons[index].onClick && buttons[index].onClick(e);
|
||||
};
|
||||
|
||||
const orientationClasses = {
|
||||
horizontal: 'flex-row',
|
||||
vertical: 'flex-col',
|
||||
};
|
||||
|
||||
const wrapperClasses = classnames('inline-flex', orientationClasses[orientation], className);
|
||||
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
className={classnames(
|
||||
'group',
|
||||
className,
|
||||
orientationClasses[orientation],
|
||||
fullWidth ? fullWidthDisplayClass : baseDisplayClass
|
||||
wrapperClasses,
|
||||
'border-secondary-light rounded-[5px] border bg-black text-[13px] '
|
||||
)}
|
||||
ref={ref}
|
||||
{...other}
|
||||
>
|
||||
{React.Children.map(children, (child, index) => {
|
||||
const isFirst = index === 0;
|
||||
const isLast = index === React.Children.count(children) - 1;
|
||||
const isNotFirstOrLast = !isFirst && !isLast;
|
||||
|
||||
if (!React.isValidElement(child)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return React.cloneElement(child, {
|
||||
className: classnames(
|
||||
buttonClasses,
|
||||
child.props.className,
|
||||
!splitBorder && isNotFirstOrLast && nonFirstLastClasses[orientation],
|
||||
!splitBorder && isLast && 'last:border-l-0'
|
||||
),
|
||||
disabled: child.props.disabled || disabled,
|
||||
color: child.props.color || color,
|
||||
fullWidth,
|
||||
rounded: 'none',
|
||||
size: child.props.size || size,
|
||||
variant: child.props.variant || variant,
|
||||
});
|
||||
{buttons.map((buttonProps, index) => {
|
||||
const isActive = index === activeIndex;
|
||||
return (
|
||||
<button
|
||||
{...buttonProps}
|
||||
key={index}
|
||||
className={classnames(
|
||||
'rounded-[4px] px-2 py-1',
|
||||
isActive ? 'bg-customblue-40 text-white' : 'text-primary-active bg-black'
|
||||
)}
|
||||
onClick={e => handleButtonClick(e, index)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonGroup.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
buttons: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
orientation: PropTypes.oneOf(Object.values(ButtonEnums.orientation)),
|
||||
type: PropTypes.oneOf(Object.values(ButtonEnums.type)),
|
||||
size: PropTypes.oneOf(Object.values(ButtonEnums.size)),
|
||||
defaultActiveIndex: PropTypes.number,
|
||||
onActiveIndexChange: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'white', 'black']),
|
||||
disabled: PropTypes.bool,
|
||||
fullWidth: PropTypes.bool,
|
||||
orientation: PropTypes.oneOf(['vertical', 'horizontal']),
|
||||
rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
|
||||
size: PropTypes.oneOf(['small', 'medium', 'large', 'inherit']),
|
||||
variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
|
||||
};
|
||||
|
||||
export default ButtonGroup;
|
||||
@@ -1,5 +1,5 @@
|
||||
import ButtonGroup from '../ButtonGroup';
|
||||
import Button from '../../Button';
|
||||
import { Button, ButtonGroup, ButtonEnums } from '../../../components';
|
||||
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
import {
|
||||
createComponentTemplate,
|
||||
@@ -16,13 +16,9 @@ export const argTypes = {
|
||||
component={ButtonGroup}
|
||||
/>
|
||||
|
||||
export const buttonGroupTemplate = args => (
|
||||
<ButtonGroup {...args}>
|
||||
<Button>One</Button>
|
||||
<Button>Two</Button>
|
||||
<Button>Three</Button>
|
||||
</ButtonGroup>
|
||||
);
|
||||
export const buttonGroupTemplate = args => {
|
||||
return <ButtonGroup {...args} />;
|
||||
};
|
||||
|
||||
<Heading
|
||||
title="ButtonGroup"
|
||||
@@ -39,7 +35,32 @@ export const buttonGroupTemplate = args => (
|
||||
ButtonGroup is a container for a group of buttons.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Overview">{buttonGroupTemplate.bind({})}</Story>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{
|
||||
type: ButtonEnums.type.primary,
|
||||
size: ButtonEnums.size.medium,
|
||||
orientation: ButtonEnums.orientation.horizontal,
|
||||
buttons: [
|
||||
{
|
||||
children: 'Button 1',
|
||||
onClick: () => console.log('Button 1 clicked'),
|
||||
},
|
||||
{
|
||||
children: 'Button 2',
|
||||
onClick: () => console.log('Button 2 clicked'),
|
||||
},
|
||||
{
|
||||
children: 'Button 3',
|
||||
onClick: () => console.log('Button 3 clicked'),
|
||||
},
|
||||
],
|
||||
activeIndex: 0,
|
||||
onActiveIndexChange: index => console.log(index),
|
||||
}}
|
||||
>
|
||||
{buttonGroupTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
@@ -48,56 +69,6 @@ ButtonGroup is a container for a group of buttons.
|
||||
|
||||
## Usage
|
||||
|
||||
### Variants
|
||||
|
||||
There are three different variants of ButtonGroup:
|
||||
|
||||
<Canvas>
|
||||
<Story name="Variants">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<ButtonGroup variant="text">
|
||||
<Button>Text</Button>
|
||||
<Button>Text</Button>
|
||||
<Button>Text</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup variant="outlined">
|
||||
<Button>Outlined</Button>
|
||||
<Button>Outlined</Button>
|
||||
<Button>Outlined</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup variant="contained">
|
||||
<Button>Contained</Button>
|
||||
<Button>Contained</Button>
|
||||
<Button>Contained</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
### Orientation
|
||||
|
||||
You can change the orientation of the buttons in the group by setting the `orientation` prop.
|
||||
|
||||
<Canvas>
|
||||
<Story name="Orientation Horizontal">
|
||||
<ButtonGroup orientation="horizontal">
|
||||
<Button>Horizontal-1</Button>
|
||||
<Button>Horizontal-2</Button>
|
||||
</ButtonGroup>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
Or vertical
|
||||
|
||||
<Canvas>
|
||||
<Story name="Orientation Vertical">
|
||||
<ButtonGroup orientation="vertical">
|
||||
<Button>Vertical-1</Button>
|
||||
<Button>Vertical-2</Button>
|
||||
</ButtonGroup>
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="ButtonGroup/__stories__/buttonGroup.stories.mdx" />
|
||||
Reference in new issue
Block a user