add default/alternative style to nodes

andrico1234 · Dec 15, 2019 · 73507a0 · 73507a0
1 parent 6036605
commit 73507a0
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 11 deletions.
diff --git a/example/index.tsx b/example/index.tsx
@@ -1,20 +1,20 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-// import {
-//   SkillTree,
-//   SkillTreeGroup,
-//   SkillProvider,
-//   SkillGroupDataType,
-//   SavedDataType,
-// } from '../src';
 import {
   SkillTree,
   SkillTreeGroup,
   SkillProvider,
   SkillGroupDataType,
   SavedDataType,
-} from '../dist/index';
+} from '../src';
+// import {
+//   SkillTree,
+//   SkillTreeGroup,
+//   SkillProvider,
+//   SkillGroupDataType,
+//   SavedDataType,
+// } from '../dist/index';
 import './index.css';
 import { legsPushData, legsPullData, hpSavedData } from './mockData';
 import { ContextStorage } from '../src/models';
@@ -31,7 +31,14 @@ function handleSave(
 const App = () => {
   return (
     <SkillProvider>
-      <SkillTreeGroup theme={{ headingFont: 'impact' }}>
+      <SkillTreeGroup
+        theme={{
+          headingFont: 'impact',
+          nodeAlternativeActiveBackgroundColor: 'blue',
+          nodeAlternativeFontColor: '#F7B538',
+          nodeAltenativeActiveFontColor: 'white',
+        }}
+      >
         {({
           skillCount,
           selectedSkillCount,

diff --git a/example/mockData.tsx b/example/mockData.tsx
@@ -67,6 +67,7 @@ export const legsPushData: SkillType[] = [
                   {
                     id: 'ass-pistol-squat',
                     title: 'Pistol Squat (Assisted)',
+                    color: 'alternative',
                     tooltip: {
                       content: <DummyVideo />,
                     },

diff --git a/src/components/ui/Node.tsx b/src/components/ui/Node.tsx
@@ -23,13 +23,19 @@ interface StyledNodeProps {
   unlocked: boolean;
   locked: boolean;
   isIOS: boolean;
+  color: 'default' | 'alternative';
+}
+
+interface TextProp {
+  selected: boolean;
 }
 
 const Node = React.forwardRef(function Node(
   props: Props,
   ref: React.Ref<HTMLDivElement>
 ) {
   const { handleClick, id, currentState, skill } = props;
+  const { color = 'default' } = skill;
   const [isIOS, setIsIOS] = React.useState(false);
 
   const memoizedHandleKeyDown = React.useCallback(
@@ -57,14 +63,21 @@ const Node = React.forwardRef(function Node(
       selected={currentState === SELECTED_STATE}
       unlocked={currentState === UNLOCKED_STATE}
       locked={currentState === LOCKED_STATE}
+      color={color}
     >
       {'icon' in skill ? (
         <IconNode>
           <Icon title="node-icon" src={skill.icon} containerWidth={64} />
         </IconNode>
       ) : (
         <TextNode>
-          <Text>{skill.title}</Text>
+          {color === 'default' ? (
+            <Text>{skill.title}</Text>
+          ) : (
+            <AlternativeText selected={currentState === SELECTED_STATE}>
+              {skill.title}
+            </AlternativeText>
+          )}
         </TextNode>
       )}
     </StyledNode>
@@ -126,7 +139,10 @@ const StyledNode = styled.div<StyledNodeProps>`
     props.selected &&
     css`
       animation: ${shadowburst} 1s 1;
-      background: ${({ theme }) => theme.nodeActiveBackgroundColor};
+      background: ${({ theme }) =>
+        props.color === 'default'
+          ? theme.nodeAlternativeActiveBackgroundColor
+          : theme.nodeActiveBackgroundColor};
     `}
 
   ${props =>
@@ -222,3 +238,13 @@ const Text = styled.p`
     font-size: ${({ theme }) => theme.nodeDesktopFontSize};
   }
 `;
+
+const AlternativeText = styled(Text)<TextProp>`
+  color: ${({ theme }) => theme.nodeAlternativeFontColor};
+
+  ${props =>
+    props.selected &&
+    css`
+      color: ${({ theme }) => theme.nodeAltenativeActiveFontColor};
+    `};
+`;
diff --git a/src/models/index.ts b/src/models/index.ts
@@ -46,6 +46,7 @@ export type ActionType =
 interface BaseSkill {
   id: string;
   optional?: boolean;
+  color?: 'default' | 'alternative';
   title: string;
   tooltip: Tooltip;
   children: Skill[];

diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -15,7 +15,16 @@ const defaultTheme = {
   tooltipFontColor: '#16181c',
   nodeBackgroundColor: '#282c34',
   nodeBorderColor: 'white',
+  nodeAlternativeFontColor: 'white',
+  nodeAltenativeActiveFontColor: 'white',
   nodeOverlayColor: 'white',
+  nodeAlternativeActiveBackgroundColor: `
+  linear-gradient(
+    to right,
+    #b9e562 0%,
+    #41e2bd 50%,
+    #c284d8 100%
+  )`,
   nodeActiveBackgroundColor: `linear-gradient(
       to right,
       #b9e562 0%,