Skip to content

Commit

Permalink
v0.3.1
Browse files Browse the repository at this point in the history
  • Loading branch information
jwoo0122 authored Feb 4, 2021
2 parents 316b3e8 + 6781cc6 commit cb3c773
Show file tree
Hide file tree
Showing 19 changed files with 240 additions and 171 deletions.
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@channel.io/design-system",
"version": "0.3.0",
"version": "0.3.1",
"description": "Design System by Channel",
"repository": {
"type": "git",
Expand Down
5 changes: 4 additions & 1 deletion src/components/Overlay/Overlay.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export default {
const Container = styled.div`
width: 600px;
height: 500px;
position: relative;
overflow: scroll;
border: 1px solid ${props => props.foundation?.theme?.['bg-black-dark']};
`
Expand Down Expand Up @@ -93,16 +94,18 @@ const ScrollContent = styled.div`

const Template = (props) => {
const targetRef = useRef<any>()
const containerRef = useRef<any>()

return (
<Container>
<Container ref={containerRef}>
<Wrapper>
<Target ref={targetRef}>
target
</Target>
<Overlay
{...props}
target={targetRef.current}
container={containerRef.current}
>
<Children>
<ScrollContent>
Expand Down
80 changes: 59 additions & 21 deletions src/components/Overlay/Overlay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,24 @@ const rootElement =
document.getElementById!('root') ||
document.getElementById!('__next') as HTMLElement

function getOverlayPosition({ target }: GetOverlayPositionProps): React.CSSProperties {
function getOverlayPosition({ container, target }: GetOverlayPositionProps): React.CSSProperties {
if (target) {
const { top: targetTop, left: targetLeft } = target.getBoundingClientRect()

const top = targetTop - target.clientTop
const left = targetLeft - target.clientLeft
const top = container ?
targetTop - target.clientTop - container.getBoundingClientRect().top + container.scrollTop :
targetTop - target.clientTop
const left = container ?
targetLeft - target.clientLeft - container.getBoundingClientRect().left + container.scrollLeft :
targetLeft - target.clientLeft

return { top, left }
}
return {}
}

function getOverlayTranslation({
container,
target,
overlay,
placement,
Expand All @@ -54,12 +59,13 @@ function getOverlayTranslation({
keepInContainer,
}: GetOverlayTranslatationProps): React.CSSProperties {
if (target) {
const containerElement = container || rootElement as HTMLElement
const {
width: rootWidth,
height: rootHeight,
top: rootTop,
left: rootLeft,
} = rootElement.getBoundingClientRect()
} = containerElement.getBoundingClientRect()
const { width: targetWidth, height: targetHeight, top: targetTop, left: targetLeft } = target.getBoundingClientRect()
const { width: overlayWidth, height: overlayHeight } = overlay.getBoundingClientRect()

Expand Down Expand Up @@ -134,6 +140,7 @@ function getOverlayTranslation({
}

function getOverlayStyle({
container,
target,
overlay,
placement,
Expand All @@ -142,8 +149,16 @@ function getOverlayStyle({
keepInContainer,
}: GetOverlayStyleProps): React.CSSProperties {
if (target) {
const overlayPositionStyle = getOverlayPosition({ target })
const overlayTranslateStyle = getOverlayTranslation({ target, overlay, placement, marginX, marginY, keepInContainer })
const overlayPositionStyle = getOverlayPosition({ container, target })
const overlayTranslateStyle = getOverlayTranslation({
container,
target,
overlay,
placement,
marginX,
marginY,
keepInContainer,
})

const combinedStyle = {
...overlayPositionStyle,
Expand All @@ -167,6 +182,7 @@ function Overlay(
style,
containerClassName = '',
containerStyle,
container,
target,
placement = OverlayPosition.LeftCenter,
marginX = 0,
Expand All @@ -181,7 +197,7 @@ function Overlay(
const [overlayStyle, setOverlayStyle] = useState<React.CSSProperties>()
const [isHidden, setIsHidden] = useState<boolean>(true)
const overlayRef = useRef<HTMLDivElement>(null)
const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
const containerRef = useRef<HTMLDivElement>(null)
const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)

const handleBlockMouseWheel = useCallback((event: HTMLElementEventMap['wheel']) => {
Expand All @@ -205,14 +221,9 @@ function Overlay(
}
}, [onHide])

const overlay = useMemo(() => (
<Container
ref={setContainerRef}
className={containerClassName}
style={containerStyle}
data-testid={containerTestId}
>
<Wrapper data-testid={wrapperTestId}>
const overlay = useMemo(() => {
if (container) {
return (
<StyledOverlay
as={as}
className={className}
Expand All @@ -227,14 +238,40 @@ function Overlay(
>
{ children }
</StyledOverlay>
</Wrapper>
</Container>
), [
)
}
return (
<Container
ref={containerRef}
className={containerClassName}
style={containerStyle}
data-testid={containerTestId}
>
<Wrapper data-testid={wrapperTestId}>
<StyledOverlay
as={as}
className={className}
isHidden={isHidden}
style={{
...(style || {}),
...(overlayStyle || {}),
}}
ref={mergedRef}
data-testid={testId}
{...otherProps}
>
{ children }
</StyledOverlay>
</Wrapper>
</Container>
)
}, [
as,
className,
style,
containerClassName,
containerStyle,
container,
isHidden,
overlayStyle,
children,
Expand All @@ -248,11 +285,12 @@ function Overlay(
useEventHandler(document, 'click', handleHideOverlay, show)
useEventHandler(document, 'keyup', handleKeydown, show)
useEventHandler(target, 'click', handleClickTarget, show)
useEventHandler(containerRef, 'wheel', handleBlockMouseWheel, show)
useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)

useEffect(() => {
if (show) {
const tempOverlayStyle = getOverlayStyle({
container,
target,
overlay: overlayRef.current as HTMLElement,
placement,
Expand All @@ -269,11 +307,11 @@ function Overlay(
}
}
return noop
}, [show, marginX, marginY, placement, target, keepInContainer])
}, [show, container, marginX, marginY, placement, target, keepInContainer])

if (!show) return null

return ReactDOM.createPortal(overlay, rootElement as HTMLElement)
return ReactDOM.createPortal(overlay, container || rootElement as HTMLElement)
}

export default forwardRef(Overlay)
4 changes: 4 additions & 0 deletions src/components/Overlay/Overlay.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default interface OverlayProps extends UIComponentProps, ChildrenComponen
show?: boolean
containerClassName?: string
containerStyle?: React.CSSProperties
container?: HTMLElement | null
target?: HTMLElement | null
placement?: OverlayPosition
marginX?: number
Expand All @@ -17,6 +18,7 @@ export default interface OverlayProps extends UIComponentProps, ChildrenComponen
}

export interface GetOverlayStyleProps {
container?: HTMLElement | null
target?: HTMLElement | null
overlay: HTMLElement
placement: OverlayPosition
Expand All @@ -26,10 +28,12 @@ export interface GetOverlayStyleProps {
}

export interface GetOverlayPositionProps {
container?: HTMLElement | null
target: HTMLElement
}

export interface GetOverlayTranslatationProps {
container?: HTMLElement | null
target: HTMLElement
overlay: HTMLElement
placement: OverlayPosition
Expand Down
1 change: 1 addition & 0 deletions src/components/Switch/Switch.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Switch from './Switch'

export default {
title: getTitle(base),
component: Switch,
argTypes: {
onClick: { action: 'onClick' },
},
Expand Down
19 changes: 19 additions & 0 deletions src/contexts/NavigationContext.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* External dependencies */
import { createContext } from 'react'
import { noop } from 'lodash-es'

export interface NavigationContextProps {
optionIndex: number
showChevron: boolean
allowMouseMove: boolean
isHoveringOnPresenter: boolean
onClickClose: () => void
}

export const NavigationContext = createContext<NavigationContextProps>({
optionIndex: -1,
showChevron: false,
allowMouseMove: false,
isHoveringOnPresenter: false,
onClickClose: noop,
})
1 change: 0 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export * from './components/Header'
export * from './layout/GNB'
export * from './layout/GlobalHeader'
export * from './layout/Client'
export * from './layout/HeaderContent'
export * from './layout/Main'
export * from './layout/Navigations'

Expand Down
49 changes: 46 additions & 3 deletions src/layout/Client/utils/LayoutReducer.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { insertItem, removeItem } from '../../../utils/utils'

export interface NavigationState {
initialWidth: number
maxWidth: number
Expand All @@ -10,21 +12,24 @@ export interface LayoutState {
sideWidth: number | null
showSideView: boolean
showNavigation: boolean
navOptions: NavigationState[]
}

export const defaultState: LayoutState = {
sideWidth: null,
showSideView: false,
showNavigation: true,
navOptions: [],
}

export enum ActionType {
SET_SIDE_WIDTH,
OPEN_SIDE_VIEW,
CLOSE_SIDE_VIEW,
SET_SHOW_NAVIGATION,
ADD_NAVIGATION,
CLEAR_NAVIGATIONS,
ADD_NAV_OPTION,
REMOVE_NAV_OPTION,
CLEAR_NAV_OPTION,
}

interface SetSideWidthAction {
Expand All @@ -45,11 +50,28 @@ interface SetShowNavigationAction {
payload: boolean
}

interface AddNavOptionAction {
type: ActionType.ADD_NAV_OPTION
payload: { index: number, option: NavigationState }
}

interface RemoveNavOptionAction {
type: ActionType.REMOVE_NAV_OPTION
payload: { index: number }
}

interface ClearNavOptionAction {
type: ActionType.CLEAR_NAV_OPTION
}

export type LayoutAction = (
SetSideWidthAction |
OpenSideViewAction |
CloseSideViewAction |
SetShowNavigationAction
SetShowNavigationAction |
AddNavOptionAction |
RemoveNavOptionAction |
ClearNavOptionAction
)

function LayoutReducer(state: LayoutState = defaultState, action: LayoutAction): LayoutState {
Expand Down Expand Up @@ -82,6 +104,27 @@ function LayoutReducer(state: LayoutState = defaultState, action: LayoutAction):
}
}

case ActionType.ADD_NAV_OPTION: {
return {
...state,
navOptions: insertItem(state.navOptions, action.payload.index, action.payload.option),
}
}

case ActionType.REMOVE_NAV_OPTION: {
return {
...state,
navOptions: removeItem(state.navOptions, action.payload.index),
}
}

case ActionType.CLEAR_NAV_OPTION: {
return {
...state,
navOptions: [],
}
}

default:
return state
}
Expand Down
4 changes: 2 additions & 2 deletions src/layout/HeaderArea/HeaderArea.styled.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ export const HeaderWrapper = styled.div.attrs(({ showSideView, sideWidth }: Head
grid-column: 1 / 3;
`

export const LeftHeader = styled.div`
export const ContentHeader = styled.div`
grid-row: 1 / 2;
grid-column: 1 / 2;
`

export const RightHeader = styled.div`
export const CoverableHeader = styled.div`
grid-row: 1 / 2;
grid-column: 2 / 3;
`
Loading

0 comments on commit cb3c773

Please sign in to comment.