GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor: picker cssinjs (#35037) 

* refactor: picker cssinjs

* feat: cssinjs

* feat: panel style

* refactor: picker status style

* feat: rtl style

* test: fix lint

* fix: fix && selector

* fix: range style

* fix: time panel style

* fix: round arrow style

* fix: style

* fix: ranges

* fix: logical

* chore: comment
pull/35105/head
MadCcc 3 years ago
committed by GitHub
parent
f4411d9393
commit
e8991979fd
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1605 additions and 373 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/_util/theme/interface.ts
  2. 15
      components/date-picker/generatePicker/generateRangePicker.tsx
  3. 14
      components/date-picker/generatePicker/generateSinglePicker.tsx
  4. 728
      components/date-picker/style/index.less
  5. 1219
      components/date-picker/style/index.tsx

2
components/_util/theme/interface.ts
View File

@ -8,6 +8,7 @@ import type { ComponentToken as MentionsComponentToken } from '../../mentions/st
import type { ComponentToken as SelectComponentToken } from '../../select/style';
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
export const PresetColors = [
@ -48,6 +49,7 @@ export interface OverrideToken {
Carousel?: {};
Cascader?: CascaderComponentToken;
Checkbox?: {};
DatePicker?: DatePickerComponentToken;
Descriptions?: {};
Divider?: DividerComponentToken;
Drawer?: {};

15
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -16,11 +16,16 @@ import { Components, getTimeProps, PickerLocale, RangePickerProps } from '.';
import { FormItemInputContext } from '../../form/context';
import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
import { PickerComponentClass } from './interface';
import useStyle from '../style';
export default function generateRangePicker<DateType>(
generateConfig: GenerateConfig<DateType>,
): PickerComponentClass<RangePickerProps<DateType>> {
class RangePicker extends React.Component<RangePickerProps<DateType>> {
type InternalRangePickerProps = RangePickerProps<DateType> & {
hashId?: string;
};
class RangePicker extends React.Component<InternalRangePickerProps> {
static contextType = ConfigContext;
context: ConfigConsumerProps;
@ -51,6 +56,8 @@ export default function generateRangePicker<DateType>(
bordered = true,
placeholder,
status: customStatus,
dropdownClassName,
hashId,
...restProps
} = this.props;
const { format, showTime, picker } = this.props as any;
@ -109,6 +116,7 @@ export default function generateRangePicker<DateType>(
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
hashId,
className,
)}
locale={locale!.lang}
@ -117,6 +125,7 @@ export default function generateRangePicker<DateType>(
generateConfig={generateConfig}
components={Components}
direction={direction}
dropdownClassName={classNames(hashId, dropdownClassName)}
/>
);
}}
@ -142,6 +151,8 @@ export default function generateRangePicker<DateType>(
const { getPrefixCls } = useContext(ConfigContext);
const prefixCls = getPrefixCls('picker', customizePrefixCls);
return <RangePicker {...props} prefixCls={prefixCls} ref={ref} />;
const [wrapSSR, hashId] = useStyle(prefixCls);
return wrapSSR(<RangePicker {...props} prefixCls={prefixCls} ref={ref} hashId={hashId} />);
}) as unknown as PickerComponentClass<RangePickerProps<DateType>>;
}

14
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -24,17 +24,21 @@ import {
import { FormItemInputContext } from '../../form/context';
import { getMergedStatus, getStatusClassNames, InputStatus } from '../../_util/statusUtils';
import { DatePickRef, PickerComponentClass } from './interface';
import useStyle from '../style';
export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
type DatePickerProps = PickerProps<DateType> & {
status?: InputStatus;
hashId?: string;
};
function getPicker<InnerPickerProps extends DatePickerProps>(
picker?: PickerMode,
displayName?: string,
) {
class Picker extends React.Component<InnerPickerProps> {
type InternalPickerProps = InnerPickerProps & { hashId?: string };
class Picker extends React.Component<InternalPickerProps> {
static contextType = ConfigContext;
static displayName: string;
@ -76,6 +80,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
placement,
placeholder,
status: customStatus,
dropdownClassName,
hashId,
...restProps
} = this.props;
const { format, showTime } = this.props as any;
@ -141,6 +147,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
getMergedStatus(contextStatus, customStatus),
hasFeedback,
),
hashId,
className,
)}
prefixCls={prefixCls}
@ -148,6 +155,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
generateConfig={generateConfig}
components={Components}
direction={direction}
dropdownClassName={classNames(hashId, dropdownClassName)}
/>
);
}}
@ -172,14 +180,16 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
const { getPrefixCls } = useContext(ConfigContext);
const prefixCls = getPrefixCls('picker', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
const pickerProps: InnerPickerProps = {
...props,
prefixCls,
ref,
hashId,
};
return <Picker {...pickerProps} />;
return wrapSSR(<Picker {...pickerProps} />);
});
if (displayName) {

728
components/date-picker/style/index.less
View File

@ -1,364 +1,364 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import './status';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
.picker-padding(@input-height, @font-size, @padding-horizontal) {
// font height probably 22.0001， So use floor better
@font-height: floor(@font-size * @line-height-base) + 2;
@padding-top: max(((@input-height - @font-height) / 2), 0);
@padding-bottom: max(@input-height - @font-height - @padding-top, 0);
padding: @padding-top @padding-horizontal @padding-bottom;
}
.@{picker-prefix-cls} {
@arrow-size: @popover-arrow-width;
.reset-component();
.picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
position: relative;
display: inline-flex;
align-items: center;
background: @picker-bg;
border: @border-width-base @border-style-base @select-border-color;
border-radius: @control-border-radius;
transition: border @animation-duration-slow, box-shadow @animation-duration-slow;
&:hover,
&-focused {
.hover();
}
&-focused {
.active();
}
&&-disabled {
background: @input-disabled-bg;
border-color: @select-border-color;
cursor: not-allowed;
}
&&-disabled &-suffix {
color: @disabled-color;
}
&&-borderless {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
// ======================== Input =========================
&-input {
position: relative;
display: inline-flex;
align-items: center;
width: 100%;
> input {
.input();
flex: auto;
// Fix Firefox flex not correct:
// https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
min-width: 1px;
height: auto;
padding: 0;
background: transparent;
border: 0;
&:focus {
box-shadow: none;
}
&[disabled] {
background: transparent;
}
}
&:hover {
.@{picker-prefix-cls}-clear {
opacity: 1;
}
}
&-placeholder {
> input {
color: @input-placeholder-color;
}
}
}
// Size
&-large {
.picker-padding(@input-height-lg, @font-size-lg, @input-padding-horizontal-lg);
.@{picker-prefix-cls}-input > input {
font-size: @font-size-lg;
}
}
&-small {
.picker-padding(@input-height-sm, @font-size-base, @input-padding-horizontal-sm);
}
&-suffix {
display: flex;
flex: none;
align-self: center;
margin-left: (@padding-xs / 2);
color: @disabled-color;
line-height: 1;
pointer-events: none;
> * {
vertical-align: top;
&:not(:last-child) {
margin-right: 8px;
}
}
}
&-clear {
position: absolute;
top: 50%;
right: 0;
color: @disabled-color;
line-height: 1;
background: @component-background;
transform: translateY(-50%);
cursor: pointer;
opacity: 0;
transition: opacity @animation-duration-slow, color @animation-duration-slow;
> * {
vertical-align: top;
}
&:hover {
color: @text-color-secondary;
}
}
&-separator {
position: relative;
display: inline-block;
width: 1em;
height: @font-size-lg;
color: @disabled-color;
font-size: @font-size-lg;
vertical-align: top;
cursor: default;
.@{picker-prefix-cls}-focused & {
color: @text-color-secondary;
}
.@{picker-prefix-cls}-range-separator & {
.@{picker-prefix-cls}-disabled & {
cursor: not-allowed;
}
}
}
// ======================== Range =========================
&-range {
position: relative;
display: inline-flex;
// Clear
.@{picker-prefix-cls}-clear {
right: @input-padding-horizontal-base;
}
&:hover {
.@{picker-prefix-cls}-clear {
opacity: 1;
}
}
// Active bar
.@{picker-prefix-cls}-active-bar {
bottom: -@border-width-base;
height: 2px;
margin-left: @input-padding-horizontal-base;
background: @primary-color;
opacity: 0;
transition: all @animation-duration-slow ease-out;
pointer-events: none;
}
&.@{picker-prefix-cls}-focused {
.@{picker-prefix-cls}-active-bar {
opacity: 1;
}
}
&-separator {
align-items: center;
padding: 0 @padding-xs;
line-height: 1;
}
&.@{picker-prefix-cls}-small {
.@{picker-prefix-cls}-clear {
right: @input-padding-horizontal-sm;
}
.@{picker-prefix-cls}-active-bar {
margin-left: @input-padding-horizontal-sm;
}
}
}
// ======================= Dropdown =======================
&-dropdown {
.reset-component();
position: absolute;
z-index: @zindex-picker;
&-hidden {
display: none;
}
&-placement-bottomLeft {
.@{picker-prefix-cls}-range-arrow {
top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
display: block;
transform: rotate(-135deg) translateY(1px);
}
}
&-placement-topLeft {
.@{picker-prefix-cls}-range-arrow {
bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
display: block;
transform: rotate(45deg);
}
}
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
animation-name: antSlideDownIn;
}
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomRight,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomRight {
animation-name: antSlideUpIn;
}
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
animation-name: antSlideDownOut;
}
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft,
&.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomRight {
animation-name: antSlideUpOut;
}
}
&-dropdown-range {
padding: (@arrow-size * 2 / 3) 0;
&-hidden {
display: none;
}
}
// Time picker with additional style
&-dropdown &-panel > &-time-panel {
padding-top: (@padding-xs / 2);
}
// ======================== Ranges ========================
&-ranges {
margin-bottom: 0;
padding: (@padding-xs / 2) @padding-sm;
overflow: hidden;
line-height: @picker-text-height - 2 * @border-width-base - (@padding-xs / 2);
text-align: left;
list-style: none;
> li {
display: inline-block;
}
// https://github.com/ant-design/ant-design/issues/23687
.@{picker-prefix-cls}-preset > .@{ant-prefix}-tag-blue {
color: @primary-color;
background: @primary-1;
border-color: @primary-3;
cursor: pointer;
}
.@{picker-prefix-cls}-ok {
float: right;
margin-left: @padding-xs;
}
}
&-range-wrapper {
display: flex;
}
&-range-arrow {
position: absolute;
z-index: 1;
display: none;
width: @arrow-size;
height: @arrow-size;
margin-left: @input-padding-horizontal-base * 1.5;
background: linear-gradient(
135deg,
transparent 40%,
@calendar-bg 40%
); // Use linear-gradient to prevent arrow from covering text
box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover
transition: left @animation-duration-slow ease-out;
.roundedArrow(@arrow-size, 5px, @calendar-bg);
}
&-panel-container {
overflow: hidden;
vertical-align: top;
background: @calendar-bg;
border-radius: @border-radius-base;
box-shadow: @box-shadow-base;
transition: margin @animation-duration-slow;
.@{picker-prefix-cls}-panels {
display: inline-flex;
flex-wrap: nowrap;
direction: ltr;
}
.@{picker-prefix-cls}-panel {
vertical-align: top;
background: transparent;
border-width: 0 0 @border-width-base 0;
border-radius: 0;
.@{picker-prefix-cls}-content,
table {
text-align: center;
}
&-focused {
border-color: @border-color-split;
}
}
}
}
@import './panel';
@import './rtl';
//@import '../../style/themes/index';
//@import '../../style/mixins/index';
//@import '../../input/style/mixin';
//@import './status';
//
//@picker-prefix-cls: ~'@{ant-prefix}-picker';
//
//.picker-padding(@input-height, @font-size, @padding-horizontal) {
// // font height probably 22.0001， So use floor better
// @font-height: floor(@font-size * @line-height-base) + 2;
// @padding-top: max(((@input-height - @font-height) / 2), 0);
// @padding-bottom: max(@input-height - @font-height - @padding-top, 0);
// padding: @padding-top @padding-horizontal @padding-bottom;
//}
//
//.@{picker-prefix-cls} {
// @arrow-size: @popover-arrow-width;
//
// .reset-component();
// .picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
// position: relative;
// display: inline-flex;
// align-items: center;
// background: @picker-bg;
// border: @border-width-base @border-style-base @select-border-color;
// border-radius: @control-border-radius;
// transition: border @animation-duration-slow, box-shadow @animation-duration-slow;
//
// &:hover,
// &-focused {
// .hover();
// }
//
// &-focused {
// .active();
// }
//
// &&-disabled {
// background: @input-disabled-bg;
// border-color: @select-border-color;
// cursor: not-allowed;
// }
//
// &&-disabled &-suffix {
// color: @disabled-color;
// }
//
// &&-borderless {
// background-color: transparent !important;
// border-color: transparent !important;
// box-shadow: none !important;
// }
//
// // ======================== Input =========================
// &-input {
// position: relative;
// display: inline-flex;
// align-items: center;
// width: 100%;
//
// > input {
// .input();
// flex: auto;
//
// // Fix Firefox flex not correct:
// // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
// min-width: 1px;
// height: auto;
// padding: 0;
// background: transparent;
//
// border: 0;
//
// &:focus {
// box-shadow: none;
// }
//
// &[disabled] {
// background: transparent;
// }
// }
//
// &:hover {
// .@{picker-prefix-cls}-clear {
// opacity: 1;
// }
// }
//
// &-placeholder {
// > input {
// color: @input-placeholder-color;
// }
// }
// }
//
// // Size
// &-large {
// .picker-padding(@input-height-lg, @font-size-lg, @input-padding-horizontal-lg);
//
// .@{picker-prefix-cls}-input > input {
// font-size: @font-size-lg;
// }
// }
//
// &-small {
// .picker-padding(@input-height-sm, @font-size-base, @input-padding-horizontal-sm);
// }
//
// &-suffix {
// display: flex;
// flex: none;
// align-self: center;
// margin-left: (@padding-xs / 2);
// color: @disabled-color;
// line-height: 1;
// pointer-events: none;
//
// > * {
// vertical-align: top;
//
// &:not(:last-child) {
// margin-right: 8px;
// }
// }
// }
//
// &-clear {
// position: absolute;
// top: 50%;
// right: 0;
// color: @disabled-color;
// line-height: 1;
// background: @component-background;
// transform: translateY(-50%);
// cursor: pointer;
// opacity: 0;
// transition: opacity @animation-duration-slow, color @animation-duration-slow;
//
// > * {
// vertical-align: top;
// }
//
// &:hover {
// color: @text-color-secondary;
// }
// }
//
// &-separator {
// position: relative;
// display: inline-block;
// width: 1em;
// height: @font-size-lg;
// color: @disabled-color;
// font-size: @font-size-lg;
// vertical-align: top;
// cursor: default;
//
// .@{picker-prefix-cls}-focused & {
// color: @text-color-secondary;
// }
//
// .@{picker-prefix-cls}-range-separator & {
// .@{picker-prefix-cls}-disabled & {
// cursor: not-allowed;
// }
// }
// }
//
// // ======================== Range =========================
// &-range {
// position: relative;
// display: inline-flex;
//
// // Clear
// .@{picker-prefix-cls}-clear {
// right: @input-padding-horizontal-base;
// }
//
// &:hover {
// .@{picker-prefix-cls}-clear {
// opacity: 1;
// }
// }
//
// // Active bar
// .@{picker-prefix-cls}-active-bar {
// bottom: -@border-width-base;
// height: 2px;
// margin-left: @input-padding-horizontal-base;
// background: @primary-color;
// opacity: 0;
// transition: all @animation-duration-slow ease-out;
// pointer-events: none;
// }
//
// &.@{picker-prefix-cls}-focused {
// .@{picker-prefix-cls}-active-bar {
// opacity: 1;
// }
// }
//
// &-separator {
// align-items: center;
// padding: 0 @padding-xs;
// line-height: 1;
// }
//
// &.@{picker-prefix-cls}-small {
// .@{picker-prefix-cls}-clear {
// right: @input-padding-horizontal-sm;
// }
//
// .@{picker-prefix-cls}-active-bar {
// margin-left: @input-padding-horizontal-sm;
// }
// }
// }
//
// // ======================= Dropdown =======================
// &-dropdown {
// .reset-component();
// position: absolute;
// z-index: @zindex-picker;
//
// &-hidden {
// display: none;
// }
//
// &-placement-bottomLeft {
// .@{picker-prefix-cls}-range-arrow {
// top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
// display: block;
// transform: rotate(-135deg) translateY(1px);
// }
// }
//
// &-placement-topLeft {
// .@{picker-prefix-cls}-range-arrow {
// bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
// display: block;
// transform: rotate(45deg);
// }
// }
//
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
// animation-name: antSlideDownIn;
// }
//
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
// &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomRight,
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft,
// &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomRight {
// animation-name: antSlideUpIn;
// }
//
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
// animation-name: antSlideDownOut;
// }
//
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft,
// &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomRight {
// animation-name: antSlideUpOut;
// }
// }
//
// &-dropdown-range {
// padding: (@arrow-size * 2 / 3) 0;
//
// &-hidden {
// display: none;
// }
// }
//
// // Time picker with additional style
// &-dropdown &-panel > &-time-panel {
// padding-top: (@padding-xs / 2);
// }
//
// // ======================== Ranges ========================
// &-ranges {
// margin-bottom: 0;
// padding: (@padding-xs / 2) @padding-sm;
// overflow: hidden;
// line-height: @picker-text-height - 2 * @border-width-base - (@padding-xs / 2);
// text-align: left;
// list-style: none;
//
// > li {
// display: inline-block;
// }
//
// // https://github.com/ant-design/ant-design/issues/23687
// .@{picker-prefix-cls}-preset > .@{ant-prefix}-tag-blue {
// color: @primary-color;
// background: @primary-1;
// border-color: @primary-3;
// cursor: pointer;
// }
//
// .@{picker-prefix-cls}-ok {
// float: right;
// margin-left: @padding-xs;
// }
// }
//
// &-range-wrapper {
// display: flex;
// }
//
// &-range-arrow {
// position: absolute;
// z-index: 1;
// display: none;
// width: @arrow-size;
// height: @arrow-size;
// margin-left: @input-padding-horizontal-base * 1.5;
// background: linear-gradient(
// 135deg,
// transparent 40%,
// @calendar-bg 40%
// ); // Use linear-gradient to prevent arrow from covering text
// box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover
// transition: left @animation-duration-slow ease-out;
// .roundedArrow(@arrow-size, 5px, @calendar-bg);
// }
//
// &-panel-container {
// overflow: hidden;
// vertical-align: top;
// background: @calendar-bg;
// border-radius: @border-radius-base;
// box-shadow: @box-shadow-base;
// transition: margin @animation-duration-slow;
//
// .@{picker-prefix-cls}-panels {
// display: inline-flex;
// flex-wrap: nowrap;
// direction: ltr;
// }
//
// .@{picker-prefix-cls}-panel {
// vertical-align: top;
// background: transparent;
// border-width: 0 0 @border-width-base 0;
// border-radius: 0;
//
// .@{picker-prefix-cls}-content,
// table {
// text-align: center;
// }
//
// &-focused {
// border-color: @border-color-split;
// }
// }
// }
//}
//
//@import './panel';
//@import './rtl';

1219
components/date-picker/style/index.tsx
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save