@junyiacademy/ui-test 0.0.8 → 0.0.12

package/dist/libs/ui/src/lib/select/StandardSelect.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StandardSelect = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const styles_1 = require("@material-ui/core/styles");
+const core_1 = require("@material-ui/core");
+// self-defined-components
+const PREFIX = 'JuiStandardSelect';
+const classes = {
+    inputLabelFocused: `${PREFIX}-inputLabelFocused`,
+    inputLabelMarginDense: `${PREFIX}-inputLabelMarginDense`,
+    inputLabelError: `${PREFIX}-inputLabelError`,
+    inputRoot: `${PREFIX}-inputRoot`,
+    inputFocused: `${PREFIX}-inputFocused`,
+    inputInput: `${PREFIX}-input`,
+    inputUnderline: `${PREFIX}-inputUnderline`,
+    inputError: `${PREFIX}-inputError`,
+    inputDisabled: `${PREFIX}-inputDisabled`,
+    inputAdornmentRoot: `${PREFIX}-inputAdornmentRoot`,
+    selectPaper: `${PREFIX}-menuPaper`,
+    selectDisabled: `${PREFIX}-selectDisabled`,
+};
+const StyledFormControl = styles_1.styled((_a) => {
+    var { width: _width } = _a, props = tslib_1.__rest(_a, ["width"]);
+    return (react_1.default.createElement(core_1.FormControl, Object.assign({}, props)));
+})(({ width, theme }) => ({
+    width,
+    margin: theme.spacing(0, 4, 4, 4),
+}));
+const StyledInputLabel = styles_1.styled((_a) => {
+    var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
+    return (react_1.default.createElement(core_1.InputLabel, Object.assign({ classes: {
+            focused: classes.inputLabelFocused,
+            error: classes.inputLabelError,
+        } }, props)));
+})(({ color, theme }) => ({
+    color: theme.palette.text.disabled,
+    margin: theme.spacing(0, 10, 1.5, 0),
+    [`&.${classes.inputLabelFocused}`]: {
+        color: theme.palette[color].main,
+    },
+    [`&.${classes.inputLabelError}`]: {
+        color: theme.palette.error.main,
+    },
+}));
+const StyledSelect = styles_1.styled((_a) => {
+    var { paperMaxHeight: _selectPaperHeight, hasAdornment: _hasAdornment, className } = _a, props = tslib_1.__rest(_a, ["paperMaxHeight", "hasAdornment", "className"]);
+    return (react_1.default.createElement(core_1.Select, Object.assign({ MenuProps: {
+            classes: { paper: className },
+            transformOrigin: {
+                vertical: 'top',
+                horizontal: 'left',
+            },
+            getContentAnchorEl: null,
+        } }, props)));
+})(({ hasAdornment, paperMaxHeight }) => ({
+    '&&': {
+        maxHeight: paperMaxHeight,
+        left: hasAdornment ? '48px !important' : '70px',
+    },
+}));
+const StyledInput = styles_1.styled((_a) => {
+    var { color: _color } = _a, props = tslib_1.__rest(_a, ["color"]);
+    return (react_1.default.createElement(core_1.Input, Object.assign({ classes: {
+            root: classes.inputRoot,
+            focused: classes.inputFocused,
+            input: classes.inputInput,
+            disabled: classes.inputDisabled,
+            underline: classes.inputUnderline,
+            error: classes.inputError,
+        } }, props)));
+})(({ color, theme }) => ({
+    color: theme.palette.text.primary,
+    [`&.${classes.inputRoot}.${classes.inputFocused}`]: {
+        backgroundColor: theme.palette.action.selected,
+    },
+    [`& .${classes.inputInput}`]: {
+        ['&:focus']: {
+            background: 'rgba(0,0,0,0)',
+        },
+    },
+    [`&.${classes.inputUnderline}:not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
+        [`&:after,&:hover:before`]: {
+            borderBottomColor: theme.palette[color].main,
+        },
+    },
+    [`&.${classes.inputUnderline}.${classes.inputError}:not(.${classes.inputDisabled})`]: {
+        [`&:after,&:hover:before`]: {
+            borderBottomColor: theme.palette.error.main,
+        },
+    },
+}));
+function StandardSelect({ placeholder, helperText, InputProps, SelectProps, children, color = 'primary', size = 'medium', width = 'auto', paperMaxHeight = 'auto', error = false, hasShrink = false, value = '', disabled = false, }) {
+    const hasAdornment = !!(InputProps === null || InputProps === void 0 ? void 0 : InputProps.startAdornment);
+    const hasHelperText = !!helperText;
+    return (react_1.default.createElement(StyledFormControl, { color: color, size: size, width: width, disabled: disabled, error: error },
+        react_1.default.createElement(StyledInputLabel, { color: color, shrink: hasShrink ? true : undefined }, placeholder),
+        react_1.default.createElement(StyledSelect, Object.assign({ value: value, paperMaxHeight: paperMaxHeight, hasAdornment: hasAdornment, input: react_1.default.createElement(StyledInput, Object.assign({ color: color }, InputProps)) }, SelectProps), children),
+        hasHelperText && react_1.default.createElement(core_1.FormHelperText, null, helperText)));
+}
+exports.StandardSelect = StandardSelect;
+exports.default = StandardSelect;

package/dist/libs/ui/src/lib/text-field/TextField.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextField = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const styles_1 = require("@material-ui/core/styles");
+const core_1 = require("@material-ui/core");
+// self-defined-components
+const PREFIX = 'JuiTextField';
+const classes = {
+    inputLabelError: `${PREFIX}-inputLabel-error`,
+    inputLabelDisabled: `${PREFIX}-inputLabel-disabled`,
+    inputLabelShrink: `${PREFIX}-inputLabel-shrink`,
+    inputLabelFocused: `${PREFIX}-inputLabel-focused`,
+    inputNotchedOutline: `${PREFIX}-input-notchedOutline`,
+    inputUnderline: `${PREFIX}-input-underline`,
+    inputColorSecondary: `${PREFIX}-input-colorSecondary`,
+    inputDisabled: `${PREFIX}-input-disabled`,
+    inputError: `${PREFIX}-input-error`,
+    inputFocused: `${PREFIX}-input-focused`,
+};
+const StyledTextField = styles_1.styled((_a) => {
+    var { hasEndAdornment, InputLabelProps, InputProps } = _a, otherProps = tslib_1.__rest(_a, ["hasEndAdornment", "InputLabelProps", "InputProps"]);
+    return (react_1.default.createElement(core_1.TextField, Object.assign({ InputLabelProps: Object.assign(Object.assign({}, InputLabelProps), { classes: {
+                error: classes.inputLabelError,
+                disabled: classes.inputLabelDisabled,
+                shrink: classes.inputLabelShrink,
+                focused: classes.inputLabelFocused,
+            }, shrink: hasEndAdornment ? true : undefined }), InputProps: Object.assign(Object.assign({}, InputProps), { classes: Object.assign({ colorSecondary: classes.inputColorSecondary, disabled: classes.inputDisabled, error: classes.inputError, focused: classes.inputFocused }, ((otherProps === null || otherProps === void 0 ? void 0 : otherProps.variant) === 'outlined'
+                ? { notchedOutline: classes.inputNotchedOutline }
+                : { underline: classes.inputUnderline })) }) }, otherProps)));
+})(({ theme }) => ({
+    [`& .${classes.inputLabelError}`]: {
+        [`&:not(.${classes.inputLabelShrink})`]: {
+            color: theme.palette.text.secondary,
+        },
+        [`&.${classes.inputLabelDisabled}`]: {
+            color: theme.palette.text.disabled,
+        },
+    },
+    [`& .${classes.inputLabelError}.${classes.inputLabelFocused}`]: {
+        color: theme.palette.error.main,
+    },
+    // For variant: standard | filled
+    [`& .${classes.inputUnderline}:not(.${classes.inputDisabled})`]: {
+        [`&:hover:before`]: {
+            borderColor: theme.palette.primary.main,
+        },
+        [`&.${classes.inputColorSecondary}:hover:before`]: {
+            borderColor: theme.palette.secondary.main,
+        },
+    },
+    // For variant: outlined
+    [`& .${classes.inputDisabled} .${classes.inputNotchedOutline}`]: {
+        borderStyle: 'dotted',
+    },
+    [`& .${classes.inputError}.${classes.inputFocused} .${classes.inputNotchedOutline}`]: {
+        borderColor: theme.palette.error.main,
+    },
+    [`& :not(.${classes.inputDisabled}):not(.${classes.inputError})`]: {
+        [`&:hover .${classes.inputNotchedOutline}`]: {
+            borderColor: theme.palette.primary.main,
+        },
+        [`&.${classes.inputColorSecondary}:hover .${classes.inputNotchedOutline}`]: {
+            borderColor: theme.palette.secondary.main,
+        },
+    },
+}));
+const TextField = (props) => {
+    var _a;
+    const hasEndAdornment = !!((_a = props === null || props === void 0 ? void 0 : props.InputProps) === null || _a === void 0 ? void 0 : _a.endAdornment);
+    return react_1.default.createElement(StyledTextField, Object.assign({ hasEndAdornment: hasEndAdornment }, props));
+};
+exports.TextField = TextField;
+exports.default = exports.TextField;

package/dist/libs/ui/src/lib/topic-filter/TopicFilter.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopicFilter = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@material-ui/core/styles");
+const ArrowRightRounded_1 = tslib_1.__importDefault(require("@material-ui/icons/ArrowRightRounded"));
+const OutlinedSelect_1 = tslib_1.__importDefault(require("../select/OutlinedSelect"));
+const SelectMenuItem_1 = tslib_1.__importDefault(require("../menu-item/SelectMenuItem"));
+// self-defined-configs
+const PLACEHOLDER = '請選擇';
+// self-defined-components
+const PREFIX = 'JuiTopicFilter';
+const FiltersWrapper = styles_1.styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+});
+const SelectWrapper = styles_1.styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+});
+const StyledArrowRightRoundedIcon = styles_1.styled(ArrowRightRounded_1.default)(({ theme }) => ({
+    margin: theme.spacing(-1, -1.5),
+    fontSize: theme.spacing(7),
+    color: '#444',
+}));
+const TopicFilter = ({ topicTree, onTopicSelected, isLastLayer, hasArrow, initSelectedTopicIds, }) => {
+    const [selectedTopicIds, setSelectedTopicIds] = react_1.useState([]);
+    const [layeredTopicList, setLayeredTopicList] = react_1.useState([]);
+    const [isFocusedList, setIsFocusedList] = react_1.useState([]);
+    const initSelectedLayers = () => {
+        const newLayeredTopicList = initSelectedTopicIds.reduce((topicListAccumulator, topicId, index) => {
+            var _a, _b;
+            const selectedTopic = (_b = (_a = topicListAccumulator[index]) === null || _a === void 0 ? void 0 : _a.childTopics) === null || _b === void 0 ? void 0 : _b.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,
+            ]);
+        }
+    };
+    react_1.useEffect(() => {
+        if (!topicTree || Object.keys(topicTree).length === 0) {
+            return;
+        }
+        if (initSelectedTopicIds.length !== 0) {
+            initSelectedLayers();
+            return;
+        }
+        setLayeredTopicList([topicTree]);
+    }, [topicTree]);
+    if (layeredTopicList.length === 0) {
+        return (react_1.default.createElement(OutlinedSelect_1.default, { size: 'small', width: 220, placeholder: '\u8F09\u5165\u8CC7\u6599\u4E2D...', disabled: true }));
+    }
+    return (react_1.default.createElement(FiltersWrapper, null, layeredTopicList.map((layeredTopic, layerNumber) => {
+        const hasLabel = isFocusedList[layerNumber] || !selectedTopicIds[layerNumber];
+        return (react_1.default.createElement(SelectWrapper, { key: layeredTopic.id },
+            react_1.default.createElement(OutlinedSelect_1.default, { size: 'small', width: 220, paperMaxHeight: 412, hasLabel: hasLabel, placeholder: PLACEHOLDER, value: (selectedTopicIds === null || selectedTopicIds === void 0 ? void 0 : 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;
+                        });
+                    },
+                } },
+                react_1.default.createElement(SelectMenuItem_1.default, { width: 220, disabled: true }, PLACEHOLDER),
+                layeredTopic.childTopics.map((childTopic) => (react_1.default.createElement(SelectMenuItem_1.default, { width: 220, key: childTopic.id, value: childTopic.id, "data-testid": `layered-menuitem-${layerNumber}`, "data-is-content-topic": childTopic.isContentTopic }, childTopic.title)))),
+            hasArrow && layerNumber !== layeredTopicList.length - 1 && (react_1.default.createElement(StyledArrowRightRoundedIcon, { fontSize: 'large', "data-testid": 'topic-filter-arrow' }))));
+    })));
+};
+exports.TopicFilter = TopicFilter;
+exports.default = exports.TopicFilter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junyiacademy/ui-test",
-  "version": "0.0.8",
+  "version": "0.0.12",
   "description": "junyiacademy ui library",
   "main": "./dist/libs/ui/src/index.js",
   "typings": "./declarations/libs/ui/src/index.d.ts",

package/src/index.ts

@@ -1,4 +1,4 @@
-export { default as TopicFilter } from './lib/TopicFilter'
+export { default as TopicFilter } from './lib/topic-filter/TopicFilter'
 export { default as SelectMenuItem } from './lib/menu-item/SelectMenuItem'
 export { default as OutlinedSelect } from './lib/select/OutlinedSelect'
 export { default as Button } from './lib/button/Button'

package/src/interfaces/index.tsx

@@ -1,3 +1,10 @@
+import { ChangeEvent } from 'react'
+import {
+  SelectProps as MuiSelectProp,
+  InputProps as MuiInputProps,
+  OutlinedInputProps,
+} from '@material-ui/core'
+
 export interface ITopicTreeNode {
   childTopics: ITopicTreeNode[]
   id: string
@@ -6,3 +13,21 @@ export interface ITopicTreeNode {
   tags: string[]
   title: string
 }
+export interface SelectProps extends MuiSelectProp {
+  placeholder: string
+  helperText?: string
+  InputProps?:
+    | (Partial<OutlinedInputProps> & {
+        onChange: (e: ChangeEvent<HTMLInputElement>) => void
+      })
+    | (object & Partial<MuiInputProps>)
+  SelectProps?: object | Partial<MuiSelectProp>
+  color?: 'primary' | 'secondary'
+  size?: 'medium' | 'small'
+  width?: number | 'auto'
+  paperMaxHeight?: number | 'auto'
+  error?: boolean
+  hasLabel?: boolean
+  hasShrink?: boolean
+  disabled?: boolean
+}

package/src/lib/select/OutlinedSelect.tsx

@@ -1,14 +1,13 @@
-import React, { ChangeEvent } from 'react'
+import React from 'react'
 import { Theme, styled } from '@material-ui/core/styles'
 import {
   InputLabel,
   FormControl,
   Select,
   OutlinedInput,
-  SelectProps,
-  OutlinedInputProps,
   FormHelperText,
 } from '@material-ui/core'
+import { SelectProps } from '../../interfaces'
 
 // self-defined-components
 const PREFIX = 'JuiOutlinedSelect'
@@ -21,10 +20,12 @@ const classes = {
   inputLabelError: `${PREFIX}-inputLabelError`,
   inputLabelDisabled: `${PREFIX}-inputLabelDisabled`,
   outlineInputInput: `${PREFIX}-input`,
+  outlineInputRoot: `${PREFIX}-inputRoot`,
   outlineInputInputMarginDense: `${PREFIX}-inputMarginDense`,
   outlineInputNotchedOutline: `${PREFIX}-notchedOutline`,
   outlineInputDisabled: `${PREFIX}-inputDisabled`,
   outlineInputError: `${PREFIX}-outlinedInputError`,
+  outlineInputFocused: `${PREFIX}-focused`,
   selectPaper: `${PREFIX}-menuPaper`,
 }
 
@@ -45,6 +46,9 @@ const StyledFormControl = styled(
       borderColor: theme.palette[color].main,
     },
   },
+  [`& .${classes.outlineInputError}.${classes.outlineInputFocused} .${classes.outlineInputNotchedOutline}`]: {
+    borderColor: `${theme.palette.error.main}`,
+  },
 }))
 
 interface StyledInputLabelProps {
@@ -90,6 +94,8 @@ interface StyledOutlinedInputProps {
 const StyledOutlinedInput = styled((props) => (
   <OutlinedInput
     classes={{
+      root: classes.outlineInputRoot,
+      focused: classes.outlineInputFocused,
       input: classes.outlineInputInput,
       inputMarginDense: classes.outlineInputInputMarginDense,
       notchedOutline: classes.outlineInputNotchedOutline,
@@ -99,8 +105,14 @@ const StyledOutlinedInput = styled((props) => (
     {...props}
   />
 ))(({ theme }: StyledOutlinedInputProps) => ({
+  [`&.${classes.outlineInputRoot}.${classes.outlineInputFocused}`]: {
+    backgroundColor: theme.palette.action.selected,
+  },
   [`& .${classes.outlineInputInput}`]: {
     color: theme.palette.text.primary,
+    ['&:focus']: {
+      background: 'rgba(0,0,0,0)',
+    },
   },
   [`& .${classes.outlineInputInputMarginDense}`]: {
     padding: '14.5px 15px 14.5px 12px',
@@ -131,38 +143,26 @@ const StyledSelect = styled(
           horizontal: 'left',
         },
         getContentAnchorEl: null,
-        classes: { paper: className },
+        classes: {
+          paper: className,
+        },
       }}
       {...props}
     />
   )
 )(({ hasAdornment, paperMaxHeight }: StyledSelectProps) => ({
-  '&&': {
+  '&': {
     maxHeight: paperMaxHeight,
     left: hasAdornment ? '24px !important' : '70px',
   },
 }))
 
-export interface OutlinedSelectProps {
-  color?: 'primary' | 'secondary'
-  size?: 'medium' | 'small'
-  width?: number | 'auto'
-  paperMaxHeight?: number | 'auto'
-  error?: boolean
-  hasLabel?: boolean
-  hasShrink?: boolean
-  placeholder: string
-  helperText?: string
-  value?: unknown
-  disabled?: boolean
-  SelectProps?: object | Partial<SelectProps>
-  OutlinedInputProps?: Partial<OutlinedInputProps> & {
-    onChange: (e: ChangeEvent<HTMLInputElement>) => void
-  }
-  children?: React.ReactNode
-}
-
-const OutlinedSelect = ({
+export const OutlinedSelect = ({
+  placeholder,
+  helperText,
+  InputProps,
+  SelectProps,
+  children,
   color = 'primary',
   size = 'medium',
   width = 'auto',
@@ -170,15 +170,10 @@ const OutlinedSelect = ({
   error = false,
   hasLabel = true,
   hasShrink = false,
-  placeholder,
-  helperText = '',
   value = '',
   disabled = false,
-  SelectProps,
-  OutlinedInputProps,
-  children,
-}: OutlinedSelectProps) => {
-  const hasAdornment = !!OutlinedInputProps?.startAdornment
+}: SelectProps) => {
+  const hasAdornment = !!InputProps?.startAdornment
   const hasHelperText = !!helperText
   return (
     <StyledFormControl
@@ -188,17 +183,15 @@ const OutlinedSelect = ({
       error={error}
       color={color}
     >
-      {hasLabel ? (
-        hasShrink ? (
-          <StyledInputLabel color={color} variant='outlined' shrink>
-            {placeholder}
-          </StyledInputLabel>
-        ) : (
-          <StyledInputLabel color={color} variant='outlined'>
-            {placeholder}
-          </StyledInputLabel>
-        )
-      ) : null}
+      {hasLabel && (
+        <StyledInputLabel
+          color={color}
+          variant='outlined'
+          shrink={hasShrink ? true : undefined}
+        >
+          {placeholder}
+        </StyledInputLabel>
+      )}
       <StyledSelect
         value={value}
         paperMaxHeight={paperMaxHeight}
@@ -208,7 +201,7 @@ const OutlinedSelect = ({
             color={color}
             label={hasLabel ? placeholder : undefined}
             disabled={disabled}
-            {...OutlinedInputProps}
+            {...InputProps}
           />
         }
         {...SelectProps}