Skip to content

Commit

Permalink
fix #187 - Refac and clean up code
Browse files Browse the repository at this point in the history
  • Loading branch information
sam-dassana committed Jan 17, 2021
1 parent 9971301 commit 36326de
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 98 deletions.
2 changes: 1 addition & 1 deletion src/components/Select/BaseSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const { Option } = AntDSelect

interface CommonBaseSelectProps
extends Omit<SelectProps, 'defaultValue' | 'onChange' | 'value'> {
useStyles(data?: unknown): Record<string, string>
useStyles: (data?: unknown) => Record<string, string>
}

interface BaseMultiSelectProps
Expand Down
13 changes: 8 additions & 5 deletions src/components/Select/MultiSelect/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import '../../assets/styles/antdAnimations.css'
import 'antd/lib/select/style/index.css'
import { BaseSelect } from '../BaseSelect'
import Fuse from 'fuse.js'
import { Input } from '../../Input'
import { MultiSelectProps } from './types'
import { getSortedAndFilteredValues, useStyles } from './utils'
import {
getSortedAndFilteredValues,
useDropdownStyles,
useStyles
} from './utils'
import React, {
ChangeEvent,
FC,
Expand Down Expand Up @@ -41,15 +43,16 @@ export const MultiSelect: FC<MultiSelectProps> = (props: MultiSelectProps) => {

const [searchTerm, setSearchTerm] = useState('')

const componentClasses = useStyles(props)
const dropdownClasses = useDropdownStyles(props)

const dropdownRender = (menu: ReactNode) => (
<>
{showSearch && (
<Input
classes={[componentClasses.searchBar]}
classes={[dropdownClasses.searchBar]}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
if (onSearch) onSearch(e.target.value)

setSearchTerm(e.target.value)
}}
onKeyDown={(e: KeyboardEvent) => {
Expand Down
19 changes: 8 additions & 11 deletions src/components/Select/MultiSelect/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ import {
generateThemedFocusedStyles,
generateThemedInputStyles,
generateThemedOptionStyles,
generateThemedSelectStyles,
tooltipStyles
generateThemedSelectStyles
} from '../utils'
import { themedStyles, ThemeType } from '../../assets/styles/themes'

Expand Down Expand Up @@ -84,6 +83,13 @@ export const generateThemedMSOptionStyles = (themeType: ThemeType) => {
const focusedClasses =
'&.ant-select-focused.ant-select-multiple:not(.ant-select-disabled) .ant-select-selector'

export const useDropdownStyles = createUseStyles({
searchBar: {
margin: 3 * spacing.xs,
width: `calc(100% - ${6 * spacing.xs}px)`
}
})

export const useStyles = createUseStyles({
checkbox: { marginRight: spacing.s },
container: ({ fullWidth, matchSelectedContentWidth }) => ({
Expand Down Expand Up @@ -112,15 +118,6 @@ export const useStyles = createUseStyles({
dropdown: generateThemedDropdownStyles(light),
error: { ...fieldErrorStyles.error },
option: generateThemedMSOptionStyles(light),
searchBar: {
margin: 3 * spacing.xs,
width: `calc(100% - ${6 * spacing.xs}px)`
},
tag: {
marginRight: spacing.xs
},
tooltip: tooltipStyles,
tooltipTriggerClasses: { minWidth: 0 },
// eslint-disable-next-line sort-keys
'@global': {
...fieldErrorStyles['@global'],
Expand Down
3 changes: 1 addition & 2 deletions src/components/Select/SingleSelect/Select.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { SbTheme } from '../../../../.storybook/preview'
import { SecondaryBgDecorator } from '../../../../.storybook/utils'
import { Select } from './index'
import { SelectProps } from './types'
import { useStyles } from '../utils'
import { useTheme } from 'react-jss'
import {
basicOptions,
Expand All @@ -16,7 +15,7 @@ import React, { FC } from 'react'
export default {
argTypes: {
onChange: { defaultValue: action('onChange') },
useStyles: { defaultValue: useStyles },
popupContainerSelector: { control: { disable: true } },
value: { control: { disable: true } }
},
component: Select,
Expand Down
4 changes: 1 addition & 3 deletions src/components/Select/SingleSelect/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import '../../assets/styles/antdAnimations.css'
import 'antd/lib/select/style/index.css'
import { BaseSelect } from '../BaseSelect'
import { SelectProps } from './types'
import { useStyles } from '../utils'
import { useStyles } from './utils'
import React, { FC } from 'react'

export const Select: FC<SelectProps> = (props: SelectProps) => {
Expand Down
88 changes: 88 additions & 0 deletions src/components/Select/SingleSelect/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { createUseStyles } from 'react-jss'
import {
defaultFieldWidth,
fieldErrorStyles,
styleguide
} from '../../assets/styles/styleguide'
import {
generateThemedDisabledStyles,
generateThemedDropdownStyles,
generateThemedFocusedStyles,
generateThemedInputStyles,
generateThemedOptionStyles,
generateThemedSelectStyles
} from '../utils'
import { themedStyles, ThemeType } from '../../assets/styles/themes'

const { dark, light } = ThemeType

const { borderRadius } = styleguide

const generateThemedSelectedItemStyles = (themeType: ThemeType) => {
const {
base: { color }
} = themedStyles[themeType]

return {
'&.ant-select-single.ant-select-open .ant-select-selection-item': {
color
}
}
}

const disabledClasses =
'&.ant-select-disabled.ant-select-single:not(.ant-select-customize-input)'
const focusedClasses =
'&.ant-select-focused:not(.ant-select-disabled).ant-select-single:not(.ant-select-customize-input) .ant-select-selector'

export const useStyles = createUseStyles({
container: ({ fullWidth, matchSelectedContentWidth }) => ({
'& .ant-select': {
borderRadius,
...generateThemedSelectStyles(light),
...generateThemedSelectedItemStyles(light),
'& .ant-select-selector': {
...generateThemedInputStyles(light),
borderRadius
},
'&$error > .ant-select-selector': {
border: `1px solid ${themedStyles[light].error.borderColor}`
},
[disabledClasses]: generateThemedDisabledStyles(light),
[focusedClasses]: generateThemedFocusedStyles(light),
minWidth: matchSelectedContentWidth
? matchSelectedContentWidth
: 'unset',
width: matchSelectedContentWidth ? 'unset' : '100%'
},
width:
fullWidth || matchSelectedContentWidth ? '100%' : defaultFieldWidth
}),
dropdown: generateThemedDropdownStyles(light),
error: { ...fieldErrorStyles.error },
option: {
...generateThemedOptionStyles(light)
},
// eslint-disable-next-line sort-keys
'@global': {
...fieldErrorStyles['@global'],
[`.${dark}`]: {
'& $container': {
'& .ant-select': {
...generateThemedSelectStyles(dark),
...generateThemedSelectedItemStyles(dark),
'& .ant-select-selector': {
...generateThemedInputStyles(dark)
},
'&$error > .ant-select-selector': {
border: `1px solid ${themedStyles[dark].error.borderColor}`
},
[disabledClasses]: generateThemedDisabledStyles(dark),
[focusedClasses]: generateThemedFocusedStyles(dark)
}
},
'& $dropdown': generateThemedDropdownStyles(dark),
'& $option': generateThemedOptionStyles(dark)
}
}
})
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import { createUseStyles } from 'react-jss'
import { generatePopupSelector } from 'components/utils'
import {
defaultFieldWidth,
fieldErrorStyles,
styleguide
} from '../assets/styles/styleguide'
import { styleguide } from '../assets/styles/styleguide'
import { themedStyles, ThemeType } from '../assets/styles/themes'

const { dark, light } = ThemeType

const {
borderRadius,
colors: { blacks, grays, whites },
fontWeight
} = styleguide
Expand Down Expand Up @@ -163,23 +157,6 @@ export const generateThemedSelectStyles = (themeType: ThemeType) => {
}
}

const generateThemedSelectedItemStyles = (themeType: ThemeType) => {
const {
base: { color }
} = themedStyles[themeType]

return {
'&.ant-select-single.ant-select-open .ant-select-selection-item': {
color
}
}
}

const disabledClasses =
'&.ant-select-disabled.ant-select-single:not(.ant-select-customize-input)'
const focusedClasses =
'&.ant-select-focused:not(.ant-select-disabled).ant-select-single:not(.ant-select-customize-input) .ant-select-selector'

export const tooltipStyles = {
'&.ant-tooltip': {
'& > .ant-tooltip-content > .ant-tooltip-inner': {
Expand All @@ -189,58 +166,6 @@ export const tooltipStyles = {
}
}

export const useStyles = createUseStyles({
container: ({ fullWidth, matchSelectedContentWidth }) => ({
'& .ant-select': {
borderRadius,
...generateThemedSelectStyles(light),
...generateThemedSelectedItemStyles(light),
'& .ant-select-selector': {
...generateThemedInputStyles(light),
borderRadius
},
'&$error > .ant-select-selector': {
border: `1px solid ${themedStyles[light].error.borderColor}`
},
[disabledClasses]: generateThemedDisabledStyles(light),
[focusedClasses]: generateThemedFocusedStyles(light),
minWidth: matchSelectedContentWidth
? matchSelectedContentWidth
: 'unset',
width: matchSelectedContentWidth ? 'unset' : '100%'
},
width:
fullWidth || matchSelectedContentWidth ? '100%' : defaultFieldWidth
}),
dropdown: generateThemedDropdownStyles(light),
error: { ...fieldErrorStyles.error },
option: {
...generateThemedOptionStyles(light)
},
// eslint-disable-next-line sort-keys
'@global': {
...fieldErrorStyles['@global'],
[`.${dark}`]: {
'& $container': {
'& .ant-select': {
...generateThemedSelectStyles(dark),
...generateThemedSelectedItemStyles(dark),
'& .ant-select-selector': {
...generateThemedInputStyles(dark)
},
'&$error > .ant-select-selector': {
border: `1px solid ${themedStyles[dark].error.borderColor}`
},
[disabledClasses]: generateThemedDisabledStyles(dark),
[focusedClasses]: generateThemedFocusedStyles(dark)
}
},
'& $dropdown': generateThemedDropdownStyles(dark),
'& $option': generateThemedOptionStyles(dark)
}
}
})

export const getPopupContainerProps = (popupContainerSelector = '') => {
let popupContainerProps = {}

Expand Down

0 comments on commit 36326de

Please sign in to comment.