Skip to content

feat(CustomSelect): add empty state styling for select component #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shiyiya wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat(CustomSelect): add empty state styling for select component #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89ad7a6
feat(CustomSelect): add empty state styling for select component
shiyiya Nov 6, 2025
502fbe8
chore(snapshot): update snapshots t
shiyiya Nov 6, 2025
16be374
feat(locale): add Chinese locale support to the storybook
shiyiya Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/CustomSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,8 +225,10 @@ export default function CustomSelect(props: CustomSelectProps) {
'react-js-cron-select': true,
'react-js-cron-custom-select': true,
[`${className}-select`]: !!className,
//empty value
'react-js-cron-select-empty': !stringValue,
}),
[className]
[className, stringValue]
)

const popupClassName = useMemo(
Expand Down
69 changes: 69 additions & 0 deletions src/stories/constants.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,75 @@ export const FRENCH_LOCALE = {
// Order is important, the index will be used as value
altWeekDays: ['DIM', 'LUN', 'MAR', 'MER', 'JEU', 'VEN', 'SAM'],
}

export const ZH_LOCALE = {
everyText: '每',
emptyMonths: '每月',
emptyMonthDays: '每月的每一天',
emptyMonthDaysShort: '日',
emptyWeekDays: '每周的每一天',
emptyWeekDaysShort: '星期',
emptyHours: '每小时',
emptyMinutes: '每分钟',
emptyMinutesForHourPeriod: '每',
yearOption: '年',
monthOption: '月',
weekOption: '周',
dayOption: '天',
hourOption: '小时',
minuteOption: '分钟',
rebootOption: '重启',
prefixPeriod: '每',
prefixMonths: '在',
prefixMonthDays: '在',
prefixWeekDays: '在',
prefixWeekDaysForMonthAndYearPeriod: '和',
prefixHours: '在',
prefixMinutes: ':',
prefixMinutesForHourPeriod: '在',
suffixMinutesForHourPeriod: '分钟',
errorInvalidCron: '无效的 cron 表达式',
clearButtonText: '清除',
weekDays: [
'星期日',
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六',
],
months: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月',
],
altWeekDays: ['日', '一', '二', '三', '四', '五', '六'],
altMonths: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
}

export const ENGLISH_VARIANT_LOCALE = {
everyText: 'all',
emptyHours: 'all hours',
Expand Down
7 changes: 6 additions & 1 deletion src/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
ENGLISH_VARIANT_LOCALE,
FRENCH_LOCALE,
NO_PREFIX_SUFFIX_LOCALE,
ZH_LOCALE,
} from './constants.stories'
import './styles.stories.css'
import { useCronReducer } from './utils.stories'
Expand Down Expand Up @@ -106,7 +107,7 @@ export function DynamicSettings() {
const [allowEmpty, setAllowEmpty] = useState<AllowEmpty>('for-default-value')
const [clockFormat, setClockFormat] = useState<ClockFormat | ''>('')
const [locale, setLocale] = useState<
'english' | 'french' | 'english-variant'
'english' | 'french' | 'english-variant' | 'chinese'
>('english')
const [defaultPeriod, setDefaultPeriod] = useState<PeriodType>('day')
const [selectedPeriod, setSelectedPeriod] = useState<PeriodType>('day')
Expand Down Expand Up @@ -154,6 +155,9 @@ export function DynamicSettings() {
case 'english-variant':
newLocale = ENGLISH_VARIANT_LOCALE
break
case 'chinese':
newLocale = ZH_LOCALE
break

default:
newLocale = {}
Expand Down Expand Up @@ -330,6 +334,7 @@ export function DynamicSettings() {
>
<Radio.Button value='english'>English</Radio.Button>
<Radio.Button value='french'>French</Radio.Button>
<Radio.Button value='chinese'>Chinese</Radio.Button>
<Radio.Button value='english-variant'>English variant</Radio.Button>
</Radio.Group>
</Form.Item>
Expand Down
7 changes: 4 additions & 3 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,14 @@ div.react-js-cron-select {
position: relative;
align-items: center;
}
/* Absolute position only when there are one child, meaning when no items are selected. */
.react-js-cron-select
.ant-select-selection-overflow:has(> :nth-child(-n + 1):last-child) {

/* Absolute position only when no items are selected. */
.react-js-cron-select-empty .ant-select-selection-overflow {
position: absolute;
top: 0;
left: 0;
}

/* Center placeholder vertically. */
.react-js-cron-select .ant-select-selection-placeholder {
margin-top: -2px;
Expand Down
10 changes: 5 additions & 5 deletions src/tests/__snapshots__/fields.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`Fields <Hours /> matches the original snapshot 1`] = `
at
</span>
<div
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
data-testid="custom-select-hours"
>
<div
Expand Down Expand Up @@ -101,7 +101,7 @@ exports[`Fields <Minutes /> matches the original snapshot 1`] = `
:
</span>
<div
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
data-testid="custom-select-minutes"
>
<div
Expand Down Expand Up @@ -193,7 +193,7 @@ exports[`Fields <MonthDays /> matches the original snapshot 1`] = `
on
</span>
<div
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
data-testid="custom-select-month-days"
>
<div
Expand Down Expand Up @@ -285,7 +285,7 @@ exports[`Fields <Months /> matches the original snapshot 1`] = `
in
</span>
<div
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
data-testid="custom-select-months"
>
<div
Expand Down Expand Up @@ -454,7 +454,7 @@ exports[`Fields <WeekDays /> matches the original snapshot 1`] = `
on
</span>
<div
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
class="ant-select ant-select-outlined react-js-cron-select react-js-cron-custom-select react-js-cron-select-empty css-dev-only-do-not-override-1261szd ant-select-multiple ant-select-allow-clear ant-select-show-arrow"
data-testid="custom-select-week-days"
>
<div
Expand Down