slate/components/core/TabGroup.js

191 lines
5.1 KiB
JavaScript
Raw Normal View History

2020-09-03 02:38:29 +03:00
import * as React from "react";
import * as Constants from "~/common/constants";
2020-11-30 08:24:22 +03:00
import { css } from "@emotion/react";
2020-09-03 02:38:29 +03:00
2020-12-18 00:49:39 +03:00
const STYLES_PRIMARY_TAB_GROUP = css`
font-size: ${Constants.typescale.lvl2};
margin-bottom: 40px;
display: flex;
align-items: flex-start;
flex-direction: row;
box-sizing: border-box;
width: 100%;
flex-wrap: wrap;
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 24px 0px 24px 0px;
}
`;
const STYLES_SECONDARY_TAB_GROUP = css`
font-size: ${Constants.typescale.lvl1};
margin: 36px 0px 24px 0px;
2020-09-03 02:38:29 +03:00
display: flex;
align-items: flex-start;
flex-direction: row;
box-sizing: border-box;
width: 100%;
2020-10-01 03:41:53 +03:00
flex-wrap: wrap;
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 24px 0px 24px 0px;
}
2020-09-03 02:38:29 +03:00
`;
2021-01-08 03:48:57 +03:00
const STYLES_TAB_GROUP = css`
font-size: ${Constants.typescale.lvl1};
margin-bottom: 24px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
box-sizing: border-box;
width: 100%;
flex-wrap: wrap;
border-bottom: 1px solid ${Constants.system.gray};
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 24px 0px 24px 0px;
}
`;
2020-09-03 02:38:29 +03:00
const STYLES_TAB = css`
2020-12-20 06:25:28 +03:00
height: 40px;
display: flex;
align-items: center;
padding: 0px 12px;
2020-12-11 06:12:03 +03:00
margin-right: 16px;
2020-09-03 02:38:29 +03:00
user-select: none;
2020-12-18 00:49:39 +03:00
border-radius: 4px;
2020-09-03 02:38:29 +03:00
@media (max-width: ${Constants.sizes.mobile}px) {
margin-right: 12px;
2021-01-21 10:02:35 +03:00
font-size: ${Constants.typescale.lvl0};
height: 32px;
padding: 0px 8px;
2020-09-03 02:38:29 +03:00
}
2020-12-18 00:49:39 +03:00
:last-child {
margin-right: 0px;
}
2020-12-11 05:59:17 +03:00
`;
2021-01-08 03:48:57 +03:00
const STYLES_NAVTAB = css`
height: 56px;
display: flex;
align-items: center;
margin-right: 32px;
user-select: none;
border-bottom: 1px solid ${Constants.system.black};
@media (max-width: ${Constants.sizes.mobile}px) {
margin-right: 12px;
font-size: ${Constants.typescale.lvl1};
}
:last-child {
margin-right: 0px;
}
`;
2020-12-18 00:49:39 +03:00
export class SecondaryTabGroup extends React.Component {
render() {
return (
<div css={STYLES_SECONDARY_TAB_GROUP} style={this.props.style}>
{this.props.tabs.map((tab, i) => (
<div
css={STYLES_TAB}
2021-01-11 07:46:04 +03:00
key={this.props.onAction ? tab.title : i}
2020-12-18 00:49:39 +03:00
style={{
color:
this.props.disabled || this.props.value === i
? Constants.system.black
: "rgba(0,0,0,0.25)",
cursor: this.props.disabled ? "auto" : "pointer",
...this.props.itemStyle,
backgroundColor: this.props.value === i ? Constants.system.white : "transparent",
}}
2020-12-19 08:25:50 +03:00
onClick={
this.props.disabled || this.props.value === i
? () => {}
: this.props.onAction
? () => this.props.onAction({ type: "NAVIGATE", value: tab.value })
: () => this.props.onChange(i)
}
2020-12-18 00:49:39 +03:00
>
2020-12-19 08:25:50 +03:00
{this.props.onAction ? tab.title : tab}
2020-12-18 00:49:39 +03:00
</div>
))}
</div>
);
}
}
export class PrimaryTabGroup extends React.Component {
2020-09-03 02:38:29 +03:00
render() {
return (
2020-12-18 00:49:39 +03:00
<div css={STYLES_PRIMARY_TAB_GROUP} style={this.props.style}>
2020-09-03 02:38:29 +03:00
{this.props.tabs.map((tab, i) => (
<div
2020-12-18 00:49:39 +03:00
css={STYLES_TAB}
2020-12-19 08:25:50 +03:00
key={this.props.onAction ? tab.title : tab}
2020-09-03 02:38:29 +03:00
style={{
2020-12-18 00:49:39 +03:00
padding: "8px 16px 8px 0",
2020-09-04 07:42:50 +03:00
color:
2020-09-08 00:45:58 +03:00
this.props.disabled || this.props.value === i
2020-09-04 07:42:50 +03:00
? Constants.system.black
: "rgba(0,0,0,0.25)",
2020-09-08 00:45:58 +03:00
cursor: this.props.disabled ? "auto" : "pointer",
2020-12-18 00:49:39 +03:00
fontFamily: Constants.font.medium,
2020-09-08 00:45:58 +03:00
...this.props.itemStyle,
2020-09-03 02:38:29 +03:00
}}
2020-12-19 08:25:50 +03:00
onClick={
this.props.disabled || this.props.value === i
? () => {}
: this.props.onAction
? () => this.props.onAction({ type: "NAVIGATE", value: tab.value })
: () => this.props.onChange(i)
}
2020-09-03 02:38:29 +03:00
>
2020-12-19 08:25:50 +03:00
{this.props.onAction ? tab.title : tab}
2020-09-03 02:38:29 +03:00
</div>
))}
</div>
);
}
}
2021-01-08 03:48:57 +03:00
export class TabGroup extends React.Component {
render() {
return (
<div css={STYLES_TAB_GROUP} style={this.props.style}>
2021-01-12 23:30:12 +03:00
{this.props.tabs.map((tab, i) => (
<div
css={STYLES_NAVTAB}
key={this.props.onAction ? tab.title : tab}
style={{
color:
this.props.disabled || this.props.value === i
? Constants.system.black
: "rgba(0,0,0,0.25)",
cursor: this.props.disabled ? "auto" : "pointer",
borderBottom: this.props.value === i ? `1px solid ${Constants.system.black}` : "none",
...this.props.itemStyle,
}}
onClick={
this.props.disabled || this.props.value === i
? () => {}
: this.props.onAction
? () => this.props.onAction({ type: "NAVIGATE", value: tab.value })
: () => this.props.onChange(i)
}
>
{this.props.onAction ? tab.title : tab}
</div>
))}
2021-01-08 03:48:57 +03:00
</div>
);
}
}