Skip to content
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

feat: timeselect 组件增加 onSelect onPannelChange onTimeChange 事件 #362

Merged
merged 1 commit into from
Oct 24, 2022
Merged

feat: timeselect 组件增加 onSelect onPannelChange onTimeChange 事件 #362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions src/packages/timeselect/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,9 @@ const TimeSelectDemo = () => {
currentKey={currentKey}
dates={dates}
times={times}
select={handleSelect}
pannelChange={handlePannelChange}
timeChange={handleTimeChange}
onSelect={handleSelect}
onPannelChange={handlePannelChange}
onTimeChange={handleTimeChange}
/>
</div>
</>
Expand Down
6 changes: 3 additions & 3 deletions src/packages/timeselect/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,9 @@ const TimeSelectDemo = () => {
currentKey={currentKey}
dates={dates}
times={times}
select={handleSelect}
pannelChange={handlePannelChange}
timeChange={handleTimeChange}
onSelect={handleSelect}
onPannelChange={handlePannelChange}
onTimeChange={handleTimeChange}
/>
</div>
</>
Expand Down
16 changes: 8 additions & 8 deletions src/packages/timeselect/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ const TimeSelectDemo = () => {
currentKey={currentKey}
dates={dates}
times={times}
select={handleSelect}
pannelChange={handlePannelChange}
timeChange={handleTimeChange}
onSelect={handleSelect}
onPannelChange={handlePannelChange}
onTimeChange={handleTimeChange}
/>
</div>
</>
Expand Down Expand Up @@ -113,8 +113,8 @@ export default TimeSelectDemo

### TimeSelect Event

| Event | Description | required | callback args |
|--------------|-------------------------------------------------------------------------------------------------------------------|----------|---------------------------------------|
| select | Callback after closing the mask | true | `list: []` |
| pannelChange | Click the date callback in the left column, and internally update the data through setCurrentKey, setCurrentTime | false | `pannelKey: string 、number, list: []` |
| timeChange | Click the time callback, and internally update the data through setCurrentKey, setCurrentTime | false | `time: string, list: []` |
| Event | Description | required | callback args |
|------------------------|-------------------------------------------------------------------------------------------------------------------|----------|---------------------------------------|
| onSelect`v1.3.8` | Callback after closing the mask | true | `list: []` |
| onPannelChange`v1.3.8` | Click the date callback in the left column, and internally update the data through setCurrentKey, setCurrentTime | false | `pannelKey: string 、number, list: []` |
| onTimeChange`v1.3.8` | Click the time callback, and internally update the data through setCurrentKey, setCurrentTime | false | `time: string, list: []` |
19 changes: 11 additions & 8 deletions src/packages/timeselect/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ const TimeSelectDemo = () => {
currentKey={currentKey}
dates={dates}
times={times}
select={handleSelect}
pannelChange={handlePannelChange}
timeChange={handleTimeChange}
onSelect={handleSelect}
onPannelChange={handlePannelChange}
onTimeChange={handleTimeChange}
/>
</div>
</>
Expand Down Expand Up @@ -113,8 +113,11 @@ export default TimeSelectDemo

### TimeSelect Event

| 名称 | 说明 | 是否必传 | 回调参数 |
|-------|----------|--------|-------------|
| select | 关闭遮罩之后的回调 | 是 | `list: []` |
| pannelChange | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
| timeChange | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
| 名称 | 说明 | 是否必传 | 回调参数 |
|------------------------|----------|--------|-------------|
| select`废弃` | 关闭遮罩之后的回调 | 是 | `list: []` |
| pannelChange`废弃` | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
| timeChange`废弃` | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
| onSelect`v1.3.8` | 关闭遮罩之后的回调 | 是 | `list: []` |
| onPannelChange`v1.3.8` | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
| onTimeChange`v1.3.8` | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
15 changes: 9 additions & 6 deletions src/packages/timeselect/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ const TimeSelectDemo = () => {
currentKey={currentKey}
dates={dates}
times={times}
select={handleSelect}
pannelChange={handlePannelChange}
timeChange={handleTimeChange}
onSelect={handleSelect}
onPannelChange={handlePannelChange}
onTimeChange={handleTimeChange}
/>
</div>
</>
Expand Down Expand Up @@ -115,6 +115,9 @@ export default TimeSelectDemo

| 名称 | 说明 | 是否必传 | 回调参数 |
|-------|----------|--------|-------------|
| select | 关闭遮罩之后的回调 | 是 | `list: []` |
| pannelChange | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
| timeChange | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
| select`废弃` | 关闭遮罩之后的回调 | 是 | `list: []` |
| pannelChange`废弃` | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
| timeChange`废弃` | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
| onSelect`v1.3.8` | 关闭遮罩之后的回调 | 是 | `list: []` |
| onPannelChange`v1.3.8` | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
| onTimeChange`v1.3.8` | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
36 changes: 29 additions & 7 deletions src/packages/timeselect/timeselect.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface DateType {
}
export interface TimeSelectProps {
className?: string
style: React.CSSProperties
visible?: boolean
height?: string
multiple?: boolean
Expand All @@ -26,9 +27,16 @@ export interface TimeSelectProps {
selectTimeData: TimeType[]
) => void
timeChange?: (time: string, selectTimeData: TimeType[]) => void
onSelect?: (selectTimeData: TimeType[]) => void
onPannelChange?: (
pannelKey: string | number,
selectTimeData: TimeType[]
) => void
onTimeChange?: (time: string, selectTimeData: TimeType[]) => void
}
const defaultProps = {
className: '',
style: {},
visible: false,
height: '20%',
multiple: false,
Expand All @@ -38,12 +46,11 @@ const defaultProps = {
dates: [],
times: [],
} as TimeSelectProps
export const TimeSelect: FunctionComponent<
Partial<TimeSelectProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
props
) => {
const { locale } = useConfig()
const {
children,
visible,
className,
height,
Expand All @@ -56,6 +63,9 @@ export const TimeSelect: FunctionComponent<
select,
pannelChange,
timeChange,
onSelect,
onPannelChange,
onTimeChange,
} = {
...defaultProps,
...props,
Expand All @@ -80,7 +90,11 @@ export const TimeSelect: FunctionComponent<

// popup 的关闭回调, 执行 select 函数更改外部 visible
const closeFun = () => {
select && select(activeTime)
if (onSelect) {
onSelect(activeTime)
} else if (select) {
select(activeTime)
}
}
// 选择配送时间回调
const handleSelectTime = (time: string) => {
Expand All @@ -104,7 +118,11 @@ export const TimeSelect: FunctionComponent<
const resultTimeData = [...activeTime]
resultTimeData.splice(curIndex, 1, curTimeData)
setActiveTime(resultTimeData)
timeChange && timeChange(time, resultTimeData)
if (onTimeChange) {
onTimeChange(time, resultTimeData)
} else if (timeChange) {
timeChange(time, resultTimeData)
}
}
// 选择日期的回调
const handleChange = (pannelKey: string | number) => {
Expand All @@ -131,7 +149,11 @@ export const TimeSelect: FunctionComponent<
])
}
}
pannelChange && pannelChange(pannelKey, resultTimeData)
if (onPannelChange) {
onPannelChange(pannelKey, resultTimeData)
} else if (pannelChange) {
pannelChange(pannelKey, resultTimeData)
}
}
// 选中的日期增加 active 类名
const getTimePannelClass = (dataItem: DateType) => {
Expand Down
36 changes: 29 additions & 7 deletions src/packages/timeselect/timeselect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface DateType {
}
export interface TimeSelectProps {
className?: string
style: React.CSSProperties
visible?: boolean
height?: string
multiple?: boolean
Expand All @@ -26,9 +27,16 @@ export interface TimeSelectProps {
selectTimeData: TimeType[]
) => void
timeChange?: (time: string, selectTimeData: TimeType[]) => void
onSelect?: (selectTimeData: TimeType[]) => void
onPannelChange?: (
pannelKey: string | number,
selectTimeData: TimeType[]
) => void
onTimeChange?: (time: string, selectTimeData: TimeType[]) => void
}
const defaultProps = {
className: '',
style: {},
visible: false,
height: '20%',
multiple: false,
Expand All @@ -38,12 +46,11 @@ const defaultProps = {
dates: [],
times: [],
} as TimeSelectProps
export const TimeSelect: FunctionComponent<
Partial<TimeSelectProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
props
) => {
const { locale } = useConfig()
const {
children,
visible,
className,
height,
Expand All @@ -56,6 +63,9 @@ export const TimeSelect: FunctionComponent<
select,
pannelChange,
timeChange,
onSelect,
onPannelChange,
onTimeChange,
} = {
...defaultProps,
...props,
Expand All @@ -80,7 +90,11 @@ export const TimeSelect: FunctionComponent<

// popup 的关闭回调, 执行 select 函数更改外部 visible
const closeFun = () => {
select && select(activeTime)
if (onSelect) {
onSelect(activeTime)
} else if (select) {
select(activeTime)
}
}
// 选择配送时间回调
const handleSelectTime = (time: string) => {
Expand All @@ -104,7 +118,11 @@ export const TimeSelect: FunctionComponent<
const resultTimeData = [...activeTime]
resultTimeData.splice(curIndex, 1, curTimeData)
setActiveTime(resultTimeData)
timeChange && timeChange(time, resultTimeData)
if (onTimeChange) {
onTimeChange(time, resultTimeData)
} else if (timeChange) {
timeChange(time, resultTimeData)
}
}
// 选择日期的回调
const handleChange = (pannelKey: string | number) => {
Expand All @@ -131,7 +149,11 @@ export const TimeSelect: FunctionComponent<
])
}
}
pannelChange && pannelChange(pannelKey, resultTimeData)
if (onPannelChange) {
onPannelChange(pannelKey, resultTimeData)
} else if (pannelChange) {
pannelChange(pannelKey, resultTimeData)
}
}
// 选中的日期增加 active 类名
const getTimePannelClass = (dataItem: DateType) => {
Expand Down