From 4a21e41223ed28ec8fab45d43535293c5a16b468 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 21 Jul 2021 09:38:56 +0800 Subject: [PATCH] refactor: date --- components/components.ts | 3 +- .../generatePicker/generateRangePicker.tsx | 2 +- .../generatePicker/generateSinglePicker.tsx | 12 +- components/date-picker/index.tsx | 3 +- components/style/themes/default.less | 27 +- components/time-picker/style/index.less | 244 ------------------ components/time-picker/style/index.ts | 2 - components/time-picker/style/index.tsx | 5 + examples/App.vue | 4 +- 9 files changed, 42 insertions(+), 260 deletions(-) delete mode 100644 components/time-picker/style/index.ts create mode 100644 components/time-picker/style/index.tsx diff --git a/components/components.ts b/components/components.ts index e901d6a9a..81934c71a 100644 --- a/components/components.ts +++ b/components/components.ts @@ -50,7 +50,8 @@ export { default as Comment } from './comment'; export { default as ConfigProvider } from './config-provider'; -export { default as DatePicker, RangePicker, MonthPicker, WeekPicker } from './date-picker'; +export type { DatePickerProps } from './date-picker'; +export { default as DatePicker } from './date-picker'; export type { DescriptionsProps } from './descriptions'; export { default as Descriptions, DescriptionsItem } from './descriptions'; diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index f77eedaa1..863c5ded2 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -15,7 +15,7 @@ import classNames from '../../_util/classNames'; export default function generateRangePicker(generateConfig: GenerateConfig) { const RangePicker = defineComponent>({ - name: 'RangePicker', + name: 'ARangePicker', inheritAttrs: false, props: ['size', 'prefixCls', 'direction', 'getPopupContainer', 'locale'] as any, slots: ['suffixIcon'], diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 55b5be94a..5d27fdbe4 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -107,14 +107,14 @@ export default function generatePicker(generateConfig: GenerateConfig< }); } - const DatePicker = getPicker(); - const WeekPicker = getPicker, 'picker'>>('week', 'WeekPicker'); - const MonthPicker = getPicker, 'picker'>>('month', 'MonthPicker'); - const YearPicker = getPicker, 'picker'>>('year', 'YearPicker'); - const TimePicker = getPicker, 'picker'>>('time', 'TimePicker'); + const DatePicker = getPicker('date', 'ADatePicker'); + const WeekPicker = getPicker, 'picker'>>('week', 'AWeekPicker'); + const MonthPicker = getPicker, 'picker'>>('month', 'AMonthPicker'); + const YearPicker = getPicker, 'picker'>>('year', 'AYearPicker'); + const TimePicker = getPicker, 'picker'>>('time', 'TimePicker'); // 给独立组件 TimePicker 使用，此处名称不用更改 const QuarterPicker = getPicker, 'picker'>>( 'quarter', - 'QuarterPicker', + 'AQuarterPicker', ); return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker }; diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx index 235a91096..fcb9d2c80 100755 --- a/components/date-picker/index.tsx +++ b/components/date-picker/index.tsx @@ -1,5 +1,6 @@ import type { Moment } from 'moment'; import momentGenerateConfig from '../vc-picker/generate/moment'; +import { withInstall } from '../_util/type'; import type { PickerProps, PickerDateProps, @@ -14,4 +15,4 @@ export type RangePickerProps = BaseRangePickerProps; const DatePicker = generatePicker(momentGenerateConfig); -export default DatePicker; +export default withInstall(DatePicker); diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 1b9b0c301..a1d5d19d1 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -578,9 +578,30 @@ // TimePicker // --- -@time-picker-panel-column-width: 56px; -@time-picker-panel-width: @time-picker-panel-column-width * 3; -@time-picker-selected-bg: @background-color-base; +@picker-bg: @component-background; +@picker-basic-cell-hover-color: @item-hover-bg; +@picker-basic-cell-active-with-range-color: @primary-1; +@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%); +@picker-basic-cell-disabled-bg: @disabled-bg; +@picker-border-color: @border-color-split; +@picker-date-hover-range-border-color: lighten(@primary-color, 20%); +@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color; +@picker-time-panel-column-width: 56px; +@picker-time-panel-column-height: 224px; +@picker-time-panel-cell-height: 28px; +@picker-panel-cell-height: 24px; +@picker-panel-cell-width: 36px; +@picker-text-height: 40px; +@picker-panel-without-time-cell-height: 66px; + +// Calendar +// --- +@calendar-bg: @component-background; +@calendar-input-bg: @input-bg; +@calendar-border-color: @border-color-inverse; +@calendar-item-active-bg: @item-active-bg; +@calendar-full-bg: @calendar-bg; +@calendar-full-panel-bg: @calendar-full-bg; // Carousel // --- diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less index 6d7c5814b..af7ae24a9 100644 --- a/components/time-picker/style/index.less +++ b/components/time-picker/style/index.less @@ -1,247 +1,3 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; - -@timepicker-prefix-cls: ~'@{ant-prefix}-time-picker'; -@timepicker-item-height: 32px; - -.@{timepicker-prefix-cls}-panel { - .reset-component(); - - position: absolute; - z-index: @zindex-picker; - font-family: @font-family; - - &-inner { - position: relative; - left: -2px; - font-size: @font-size-base; - text-align: left; - list-style: none; - background-color: @component-background; - background-clip: padding-box; - border-radius: @border-radius-base; - outline: none; - box-shadow: @box-shadow-base; - } - - &-input { - background: @input-bg; - width: 100%; - max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px; - margin: 0; - padding: 0; - line-height: normal; - border: 0; - outline: 0; - cursor: auto; - - .placeholder(); - - &-wrap { - position: relative; - padding: 7px 2px 7px @control-padding-horizontal; - border-bottom: @border-width-base @border-style-base @border-color-split; - } - - &-invalid { - border-color: @error-color; - } - } - - &-narrow &-input-wrap { - max-width: @time-picker-panel-column-width * 2; - } - - &-select { - position: relative; // Fix chrome weird render bug - float: left; - width: @time-picker-panel-column-width; - max-height: @timepicker-item-height * 6; - overflow: hidden; - font-size: @font-size-base; - border-left: @border-width-base @border-style-base @border-color-split; - - &:hover { - overflow-y: auto; - } - - &:first-child { - margin-left: 0; - border-left: 0; - } - - &:last-child { - border-right: 0; - } - - &:only-child { - width: 100%; - } - - ul { - // use fixed width instead of 100% - // to fix strange render bug in safari: https://github.com/ant-design/ant-design/issues/17842 - width: @time-picker-panel-column-width; - margin: 0; - padding: 0 0 @timepicker-item-height * 5; - list-style: none; - } - - li { - width: 100%; - height: @timepicker-item-height; - margin: 0; - padding: 0 0 0 @control-padding-horizontal; - line-height: @timepicker-item-height; - text-align: left; - list-style: none; - cursor: pointer; - transition: all 0.3s; - user-select: none; - - &:focus { - color: @primary-color; - font-weight: 600; - outline: none; - } - } - - li:hover { - background: @item-hover-bg; - } - - li&-option-selected { - font-weight: 600; - background: @time-picker-selected-bg; - &:hover { - background: @time-picker-selected-bg; - } - } - - li&-option-disabled { - color: @btn-disable-color; - &:hover { - background: transparent; - cursor: not-allowed; - } - &:focus { - color: @btn-disable-color; - font-weight: inherit; - } - } - } - - &-combobox { - .clearfix(); - } - - &-addon { - padding: 8px; - border-top: @border-width-base @border-style-base @border-color-split; - } - - &.slide-up-enter.slide-up-enter-active&-placement-topLeft, - &.slide-up-enter.slide-up-enter-active&-placement-topRight, - &.slide-up-appear.slide-up-appear-active&-placement-topLeft, - &.slide-up-appear.slide-up-appear-active&-placement-topRight { - animation-name: antSlideDownIn; - } - - &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, - &.slide-up-enter.slide-up-enter-active&-placement-bottomRight, - &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft, - &.slide-up-appear.slide-up-appear-active&-placement-bottomRight { - animation-name: antSlideUpIn; - } - - &.slide-up-leave.slide-up-leave-active&-placement-topLeft, - &.slide-up-leave.slide-up-leave-active&-placement-topRight { - animation-name: antSlideDownOut; - } - - &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft, - &.slide-up-leave.slide-up-leave-active&-placement-bottomRight { - animation-name: antSlideUpOut; - } -} - -.@{timepicker-prefix-cls} { - .reset-component(); - - position: relative; - display: inline-block; - width: 128px; - outline: none; - cursor: text; - transition: opacity 0.3s; - - &-input { - .input(); - &[disabled] { - .disabled(); - } - } - - &-open { - opacity: 0; - } - - &-icon, - &-clear { - position: absolute; - top: 50%; - right: @control-padding-horizontal - 1px; - z-index: 1; - width: 14px; - height: 14px; - margin-top: -7px; - color: @disabled-color; - line-height: 14px; - transition: all 0.3s @ease-in-out; - user-select: none; - .@{timepicker-prefix-cls}-clock-icon { - display: block; - color: @disabled-color; - line-height: 1; - } - } - - &-clear { - z-index: 2; - background: @input-bg; - opacity: 0; - pointer-events: none; - &:hover { - color: @text-color-secondary; - } - } - &:hover &-clear { - opacity: 1; - pointer-events: auto; - } - - &-large &-input { - .input-lg(); - } - - &-small &-input { - .input-sm(); - } - - &-small &-icon, - &-small &-clear { - right: @control-padding-horizontal-sm - 1px; - } -} - -// Fix cursor height in safari -// https://stackoverflow.com/q/3843408/3040605 -// https://browserstrangeness.github.io/css_hacks.html#safari -@media not all and (min-resolution: 0.001dpcm) { - @supports (-webkit-appearance: none) and (stroke-color: transparent) { - .@{ant-prefix}-input { - line-height: @line-height-base; - } - } -} diff --git a/components/time-picker/style/index.ts b/components/time-picker/style/index.ts deleted file mode 100644 index 3a3ab0de5..000000000 --- a/components/time-picker/style/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import '../../style/index.less'; -import './index.less'; diff --git a/components/time-picker/style/index.tsx b/components/time-picker/style/index.tsx new file mode 100644 index 000000000..b2534aab0 --- /dev/null +++ b/components/time-picker/style/index.tsx @@ -0,0 +1,5 @@ +import '../../style/index.less'; +import './index.less'; + +// style dependencies +import '../../date-picker/style'; diff --git a/examples/App.vue b/examples/App.vue index 237f9908d..d486a4e2c 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -1,9 +1,9 @@