62817568a7
* Replace withStyleswith useStyles (#1100) * Replace withStyleswith useStyles * Update messages * Use rem as a spacing unit (#1101) * Use rems as spacing units * Fix visual bugs * Update stories * Use macaw-ui as theme provider (#1108) * Use macaw ui as a theme provider * Add react-dom to aliases * Fix jest module resolution * Update useTheme hook usage * Fix test wrapper * Use macaw from git repo * Fix CI * Update stories * Fix aliasing * Extract savebar to macaw ui (#1146) * wip * Use savebar from macaw * Use confirm button from macaw * Improve file structure * Use sidebar context from macaw * Update macaw * Update macaw version * Remove savebar from storybook * Update stories * Use alerts and notifications from macaw (#1166) * Use alerts from macaw * Add notifications from macaw * Update stories * Pin macaw version * Encapsulate limit reached in one component * Remove unused imports * Use backlinks from macaw (#1183) * Use backlink from macaw * Update macaw version * Use macaw sidebar (#1148) * Use sidebar from macaw * Use shipped logo * Use lowercase * Update stories * Use user chip from macaw (#1191) * Use user chip from macaw * Use dedicated components for menu items * Simplify code * Bump version and fix types (#1210) * Rename onBack to onClick * Rename UserChip to UserChipMenu * Rename IMenuItem to SidebarMenuItem * Update macaw version * Fix tables after changes in macaw (#1220) * Update macaw version * Update changelog * Update stories * Fix after rebase * Update to macaw 0.2.0 * Lint files * Update macaw to 0.2.2
66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import { Button } from "@material-ui/core";
|
|
import { fade } from "@material-ui/core/styles/colorManipulator";
|
|
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
|
|
import { makeStyles } from "@saleor/macaw-ui";
|
|
import classNames from "classnames";
|
|
import React from "react";
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
interface ColumnPickerButtonProps {
|
|
active: boolean;
|
|
className?: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
icon: {
|
|
marginLeft: theme.spacing(2),
|
|
transition: theme.transitions.duration.short + "ms"
|
|
},
|
|
root: {
|
|
"& span": {
|
|
color: theme.palette.primary.main
|
|
},
|
|
paddingRight: theme.spacing(1)
|
|
},
|
|
rootActive: {
|
|
background: fade(theme.palette.primary.main, 0.1)
|
|
},
|
|
rotate: {
|
|
transform: "rotate(180deg)"
|
|
}
|
|
}),
|
|
{
|
|
name: "ColumnPickerButton"
|
|
}
|
|
);
|
|
|
|
const ColumnPickerButton: React.FC<ColumnPickerButtonProps> = props => {
|
|
const { active, className, onClick } = props;
|
|
const classes = useStyles(props);
|
|
|
|
return (
|
|
<Button
|
|
className={classNames(classes.root, className, {
|
|
[classes.rootActive]: active
|
|
})}
|
|
color="primary"
|
|
onClick={onClick}
|
|
variant="outlined"
|
|
>
|
|
<FormattedMessage
|
|
defaultMessage="Columns"
|
|
description="select visible columns button"
|
|
/>
|
|
<ArrowDropDownIcon
|
|
color="primary"
|
|
className={classNames(classes.icon, {
|
|
[classes.rotate]: active
|
|
})}
|
|
/>
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default ColumnPickerButton;
|