From 92f3f2f4ebd0fa044c40368d4d94aa25aebfdb57 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 15 Oct 2020 23:01:21 -0700 Subject: [PATCH] Added SegmentedControl to New page --- .../PartySegmentedControl/index.tsx | 45 ++++++++ src/components/Segment/index.css | 101 ++++++++++++++++++ src/components/Segment/index.tsx | 33 ++++++ src/components/SegmentedControl/index.css | 15 +++ src/components/SegmentedControl/index.tsx | 17 +++ src/routes/New/index.tsx | 30 ++++-- 6 files changed, 233 insertions(+), 8 deletions(-) create mode 100644 src/components/PartySegmentedControl/index.tsx create mode 100644 src/components/Segment/index.css create mode 100644 src/components/Segment/index.tsx create mode 100644 src/components/SegmentedControl/index.css create mode 100644 src/components/SegmentedControl/index.tsx diff --git a/src/components/PartySegmentedControl/index.tsx b/src/components/PartySegmentedControl/index.tsx new file mode 100644 index 00000000..2eebfe0d --- /dev/null +++ b/src/components/PartySegmentedControl/index.tsx @@ -0,0 +1,45 @@ +import React from 'react' +import SegmentedControl from '~components/SegmentedControl' +import Segment from '~components/Segment' + +interface Props { + selectedTab: string + onClick: (event: React.ChangeEvent) => void +} + +const PartySegmentedControl = (props: Props) => { + return ( +
+ + Class + Characters + + Weapons + + Summons + +
+ ) +} + +export default PartySegmentedControl diff --git a/src/components/Segment/index.css b/src/components/Segment/index.css new file mode 100644 index 00000000..7cf1996c --- /dev/null +++ b/src/components/Segment/index.css @@ -0,0 +1,101 @@ +.Segment { + border-radius: 4px; + color: #888; + cursor: pointer; + font-size: 16px; + font-weight: 500; + min-width: 100px; +} + +.Segment > input { + display: none; +} + +.Segment > input + label { + +} + +.Segment > input:checked + label { + background: #61B3FF; + color: white; +} + +.Segment > label { + display: block; + text-align: center; + white-space: nowrap; + overflow: hidden; + padding: 8px 12px; + text-overflow: ellipsis; + cursor: pointer; +} + +.Segment > label:before { + background: #fff; +} + +/* +.flight-types + +segmented-controls(3, 112px, 0px, #3395DE) + margin: 0 auto + font-size: 12px + border: 1px solid #fff + border-radius: 3px + color: #fff + label + padding: 6px 3px + transition: color 250ms cubic-bezier(0,.95,.38,.98) + &:before + background: #fff + transition: all 250ms cubic-bezier(0,.95,.38,.98) + &:not(:last-child) + border-right: 1px solid #fff */ +/* + + z-index: 1 + > input + display: none + &:checked + label + color: $active + @for $i from 1 through $amount + $index: $i - 1 + &:nth-of-type(#{$i}):checked + ~ label:last-of-type:before + transform: translateX(calc(#{100 * $index}% + #{$_margin * $index})) + label + flex: 1 + text-align: center + white-space: nowrap + overflow: hidden + text-overflow: ellipsis + cursor: pointer + // we use the last label's pseudo element as the active state + // to eliminate the need for an arbitrary element + &:last-of-type:before + content: "" + display: block + max-width: calc(#{$_width} - #{$_margin}) + margin: $margin + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + z-index: -1 + transform: translateX(0) + +.flight-types + +segmented-controls(3, 112px, 0px, #3395DE) + margin: 0 auto + font-size: 12px + border: 1px solid #fff + border-radius: 3px + color: #fff + label + padding: 6px 3px + transition: color 250ms cubic-bezier(0,.95,.38,.98) + &:before + background: #fff + transition: all 250ms cubic-bezier(0,.95,.38,.98) + &:not(:last-child) + border-right: 1px solid #fff */ \ No newline at end of file diff --git a/src/components/Segment/index.tsx b/src/components/Segment/index.tsx new file mode 100644 index 00000000..b7562fa2 --- /dev/null +++ b/src/components/Segment/index.tsx @@ -0,0 +1,33 @@ +import React from 'react' + +import './index.css' + +interface Props { + groupName: string + name: string + selected: boolean + children: string + onClick: (event: React.ChangeEvent) => void +} + +const Segment: React.FC = (props: Props) => { + + + return ( +
+ + +
+ ) +} + +export default Segment \ No newline at end of file diff --git a/src/components/SegmentedControl/index.css b/src/components/SegmentedControl/index.css new file mode 100644 index 00000000..e5544066 --- /dev/null +++ b/src/components/SegmentedControl/index.css @@ -0,0 +1,15 @@ +.SegmentedControlWrapper { + display: flex; + justify-content: center; +} + +.SegmentedControl { + background: white; + border-radius: 8px; + display: inline-flex; + position: relative; + user-select: none; + overflow: hidden; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + z-index: 1; +} \ No newline at end of file diff --git a/src/components/SegmentedControl/index.tsx b/src/components/SegmentedControl/index.tsx new file mode 100644 index 00000000..19608eea --- /dev/null +++ b/src/components/SegmentedControl/index.tsx @@ -0,0 +1,17 @@ +import React from 'react' + +import './index.css' + +interface Props {} + +const SegmentedControl: React.FC = ({ children }) => { + return ( +
+
+ {children} +
+
+ ) +} + +export default SegmentedControl \ No newline at end of file diff --git a/src/routes/New/index.tsx b/src/routes/New/index.tsx index 9fec15c8..f21f086e 100644 --- a/src/routes/New/index.tsx +++ b/src/routes/New/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import { RouteComponentProps } from 'react-router-dom' import { useCookies } from 'react-cookie' import WeaponGrid from '~components/WeaponGrid' @@ -8,13 +8,8 @@ interface NewProps extends RouteComponentProps {} const New: React.FC = (props: NewProps) => { const [cookies, setCookie] = useCookies(['user']) - - function callback(path: string) { - // This is scuffed, how do we do this natively? - window.history.replaceState(null, `Grid Tool`, `${path}`) - } - - return ( + const [selectedTab, setSelectedTab] = useState('weapons') + const [grid, setGrid] = useState( = (props: NewProps) => { pushHistory={callback} /> ) + + function callback(path: string) { + // This is scuffed, how do we do this natively? + window.history.replaceState(null, `Grid Tool`, `${path}`) + } + + function segmentClicked(event: React.ChangeEvent) { + } + + return ( +
+ + + {grid} +
+ ) } export default New \ No newline at end of file