@junyiacademy/ui-test 0.0.12 → 1.4.1

package/src/lib/topic-filter/TopicFilter.tsx

@@ -1,204 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Theme, styled } from '@material-ui/core/styles'
-import ArrowRightRoundedIcon from '@material-ui/icons/ArrowRightRounded'
-import type { ITopicTreeNode } from '../../interfaces'
-import OutlinedSelect from '../select/OutlinedSelect'
-import SelectMenuItem from '../menu-item/SelectMenuItem'
-
-// self-defined-configs
-const PLACEHOLDER = '請選擇'
-
-// self-defined-components
-const PREFIX = 'JuiTopicFilter'
-
-const FiltersWrapper = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
-  flexWrap: 'wrap',
-})
-
-const SelectWrapper = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
-})
-
-interface StyledArrowRightRoundedIconProps {
-  theme?: Theme
-}
-
-const StyledArrowRightRoundedIcon = styled(ArrowRightRoundedIcon)(
-  ({ theme }: StyledArrowRightRoundedIconProps) => ({
-    margin: theme.spacing(-1, -1.5),
-    fontSize: theme.spacing(7),
-    color: '#444',
-  })
-)
-
-export interface TopicFilterProps {
-  topicTree: ITopicTreeNode
-  onTopicSelected: (
-    topic: ITopicTreeNode,
-    selectedInfo: { layerNumber: number; selectedTopicIds: string[] }
-  ) => void
-  isLastLayer: (topic: ITopicTreeNode) => boolean
-  hasArrow: boolean
-  initSelectedTopicIds: string[]
-}
-
-export const TopicFilter = ({
-  topicTree,
-  onTopicSelected,
-  isLastLayer,
-  hasArrow,
-  initSelectedTopicIds,
-}: TopicFilterProps) => {
-  const [selectedTopicIds, setSelectedTopicIds] = useState([])
-  const [layeredTopicList, setLayeredTopicList] = useState([])
-  const [isFocusedList, setIsFocusedList] = useState([])
-  const initSelectedLayers = () => {
-    const newLayeredTopicList = initSelectedTopicIds.reduce(
-      (topicListAccumulator, topicId, index) => {
-        const selectedTopic = topicListAccumulator[index]?.childTopics?.find(
-          (childTopic) => childTopic.id === topicId
-        )
-
-        if (!selectedTopic) {
-          return topicListAccumulator
-        }
-        if (isLastLayer(selectedTopic)) {
-          return topicListAccumulator
-        }
-        return [...topicListAccumulator, selectedTopic]
-      },
-      [topicTree]
-    )
-
-    setLayeredTopicList(newLayeredTopicList)
-    setSelectedTopicIds(
-      initSelectedTopicIds.slice(0, newLayeredTopicList.length)
-    )
-    setIsFocusedList(Array(newLayeredTopicList.length).fill(false))
-  }
-
-  const handleChange = (e, layerNumber, layeredTopic) => {
-    const selectedTopic = layeredTopic.childTopics.find(
-      (childTopic) => childTopic.id === e.target.value
-    )
-
-    const newSelectedTopicIds = [
-      ...selectedTopicIds.slice(0, layerNumber),
-      selectedTopic.id,
-    ]
-    setSelectedTopicIds(newSelectedTopicIds)
-    onTopicSelected(selectedTopic, {
-      layerNumber,
-      selectedTopicIds: newSelectedTopicIds,
-    })
-
-    if (isLastLayer(selectedTopic)) {
-      setLayeredTopicList((prevTopicList) =>
-        prevTopicList.slice(0, layerNumber + 1)
-      )
-      setIsFocusedList((prevList) => prevList.slice(0, layerNumber + 1))
-    } else {
-      setLayeredTopicList((prevTopicList) => [
-        ...prevTopicList.slice(0, layerNumber + 1),
-        selectedTopic,
-      ])
-      setIsFocusedList((prevList) => [
-        ...prevList.slice(0, layerNumber + 1),
-        false,
-      ])
-    }
-  }
-
-  useEffect(() => {
-    if (!topicTree || Object.keys(topicTree).length === 0) {
-      return
-    }
-    if (initSelectedTopicIds.length !== 0) {
-      initSelectedLayers()
-      return
-    }
-    setLayeredTopicList([topicTree])
-  }, [topicTree])
-
-  if (layeredTopicList.length === 0) {
-    return (
-      <OutlinedSelect
-        size='small'
-        width={220}
-        placeholder='載入資料中...'
-        disabled
-      ></OutlinedSelect>
-    )
-  }
-  return (
-    <FiltersWrapper>
-      {layeredTopicList.map((layeredTopic, layerNumber) => {
-        const hasLabel =
-          isFocusedList[layerNumber] || !selectedTopicIds[layerNumber]
-        return (
-          <SelectWrapper key={layeredTopic.id}>
-            <OutlinedSelect
-              size='small'
-              width={220}
-              paperMaxHeight={412}
-              hasLabel={hasLabel}
-              placeholder={PLACEHOLDER}
-              value={selectedTopicIds?.[layerNumber] || ''}
-              SelectProps={{
-                'data-testid': `layered-topic-${layerNumber}`,
-              }}
-              InputProps={{
-                inputProps: {
-                  'aria-label': `layered-topic-${layerNumber}`,
-                },
-                onChange: (e) => {
-                  handleChange(e, layerNumber, layeredTopic)
-                },
-                onFocus: () => {
-                  setIsFocusedList((prevList) => {
-                    const newList = [...prevList]
-                    newList[layerNumber] = true
-                    return newList
-                  })
-                },
-                onBlur: () => {
-                  setIsFocusedList((prevList) => {
-                    const newList = [...prevList]
-                    newList[layerNumber] = false
-                    return newList
-                  })
-                },
-              }}
-            >
-              <SelectMenuItem width={220} disabled>
-                {PLACEHOLDER}
-              </SelectMenuItem>
-              {layeredTopic.childTopics.map((childTopic) => (
-                <SelectMenuItem
-                  width={220}
-                  key={childTopic.id}
-                  value={childTopic.id}
-                  data-testid={`layered-menuitem-${layerNumber}`}
-                  data-is-content-topic={childTopic.isContentTopic}
-                >
-                  {childTopic.title}
-                </SelectMenuItem>
-              ))}
-            </OutlinedSelect>
-            {hasArrow && layerNumber !== layeredTopicList.length - 1 && (
-              <StyledArrowRightRoundedIcon
-                fontSize='large'
-                data-testid='topic-filter-arrow'
-              ></StyledArrowRightRoundedIcon>
-            )}
-          </SelectWrapper>
-        )
-      })}
-    </FiltersWrapper>
-  )
-}
-
-export default TopicFilter

package/src/styles/theme.ts

@@ -1,60 +0,0 @@
-/**
- * Copyright (c) 2020 Junyi Academy.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { createMuiTheme } from '@material-ui/core/styles'
-
-declare module '@material-ui/core/styles/createPalette' {
-  interface Palette {
-    green: {
-      primary: Palette['primary']
-      blueGreen: Palette['primary']
-      grassGreen: Palette['primary']
-    }
-  }
-  interface PaletteOptions {
-    green: {
-      primary: PaletteOptions['primary']
-      blueGreen: PaletteOptions['primary']
-      grassGreen: PaletteOptions['primary']
-    }
-  }
-}
-
-// Create a theme instance.
-const theme = createMuiTheme({
-  typography: {
-    fontFamily: ['Noto Sans TC', 'Helvetica', 'Arial', 'sans-serif'].join(','),
-  },
-  palette: {
-    primary: {
-      light: '#82C0FF',
-      main: '#4990E2',
-      dark: '#0063B0',
-    },
-    secondary: {
-      light: '#FFD759',
-      main: '#F5A623',
-      dark: '#BD7700',
-      contrastText: '#FFFFFF',
-    },
-    green: {
-      primary: {
-        light: '#9DD49E',
-        main: '#5CB85D',
-        dark: '#218838',
-      },
-      blueGreen: {
-        main: '#19A696',
-      },
-      grassGreen: {
-        main: '#80BB5A',
-      },
-    },
-  },
-})
-
-export default theme

package/src/utils/topicTree.ts

@@ -1,197 +0,0 @@
-import { ITopicTreeNode } from '../interfaces'
-
-export const topicTree: ITopicTreeNode = {
-  childTopics: [
-    {
-      childTopics: [
-        {
-          childTopics: [
-            {
-              childTopics: [
-                {
-                  childTopics: [],
-                  id: 'j-m1ach1',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKFlWUkdyck1reDdXU3lSb3pQYXU4RDlDTnZ4Ukx3MjhYU2ZCcTF0LTEM',
-                  tags: [],
-                  title: '【一上】數到 10',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach2',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短1',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach3',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短2',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach4',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短3',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach5',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短4',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach6',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短5',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach7',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短6',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach8',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短7',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach9',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短8',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach10',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短9',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach11',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短10',
-                },
-                {
-                  childTopics: [],
-                  id: 'j-m1ach12',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHRXZlVrTHNpSjRYcHlMTGFDa2QtVTRDWkRjcjMwZ3JSTGtSUUNNazgM',
-                  tags: [],
-                  title: '【一上】比長短11',
-                },
-              ],
-              id: 'math-grade-1-a',
-              isContentTopic: false,
-              key:
-                'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHN2MlIzS0VwaXlVeWdJQnhyYzBYakZ0RDZhU0JraGFJbGctU19qZFoM',
-              tags: [],
-              title: '均一版',
-            },
-          ],
-          id: 'math-1',
-          isContentTopic: false,
-          key:
-            'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKEVzRnVINFdtalZBRmdQUkpjeWtaWFVnSlR2OEc2RzVsWnA1a0ZEVV8M',
-          tags: ['grouping_eleme'],
-          title: '一年級',
-        },
-        {
-          childTopics: [
-            {
-              childTopics: [
-                {
-                  childTopics: [],
-                  id: 'n-m2ach1',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKExzUnEyWUgzUEduZmVzWm1oVXdxLU5tdmxjZmx4aWJXbkVKN0JVcXYM',
-                  tags: [],
-                  title: '【二上】第一單元 數到 300',
-                },
-                {
-                  childTopics: [],
-                  id: 'n-m2ach2',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKFJuTDZLWXhxS0xNQ3VPU3BkUXZBOVN6YkRrVTNqdVNRSFdjbTEwc2UM',
-                  tags: [],
-                  title: '【二上】第二單元 二位數的加法',
-                },
-                {
-                  childTopics: [],
-                  id: 'n-m2ach3',
-                  isContentTopic: true,
-                  key:
-                    'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHpYUWFzZXNPbS16V1BVeG9qeVFRQXlfZzA5Wm44ajdVZnM1dU85UWkM',
-                  tags: [],
-                  title: '【二上】第三單元 幾公分',
-                },
-              ],
-              id: 'n-m2a',
-              isContentTopic: false,
-              key:
-                'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKHl3QXRqNW1xMmk2QTRfR0JzWlpXQnVRQW1fYW5ZTEV4MkJ2ZUlYSmUM',
-              tags: [],
-              title: '南一版',
-            },
-          ],
-          id: 'math-2',
-          isContentTopic: false,
-          key:
-            'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKE92cm9EU1N4c3FZM2J6MzMzZ05XWFR6RGFLMDJudHlIaHFtN1VRcXIM',
-          tags: ['grouping_eleme'],
-          title: '二年級',
-        },
-      ],
-      id: 'course-compare',
-      isContentTopic: false,
-      key:
-        'ag5zfmp1bnlpYWNhZGVteXJmCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoMCxIFVG9waWMiKDFCSmFuVjVsTWlUUWZaU21MeE9FU3BZbVlmcktkNHJWN3Q5WU1VWjQM',
-      tags: ['has-pre-exam', 'has-post-exam'],
-      title: '數學',
-    },
-  ],
-  id: 'root',
-  isContentTopic: false,
-  key:
-    'ag5zfmp1bnlpYWNhZGVteXIzCxIFVG9waWMiKHpWQ01BOGpXQTU5SW1zSi1sdWJSQTJlV0QzbHpuZUZiY1BwMUZWOVoM',
-  tags: [],
-  title: '知識樹',
-}