1
This commit is contained in:
+11
@@ -0,0 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import type { RateRef, RateProps as RcRateProps } from '@rc-component/rate/lib/Rate';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import type { TooltipProps } from '../tooltip';
|
||||
export interface RateProps extends RcRateProps {
|
||||
rootClassName?: string;
|
||||
tooltips?: (TooltipProps | string)[];
|
||||
size?: SizeType;
|
||||
}
|
||||
declare const Rate: React.ForwardRefExoticComponent<RateProps & React.RefAttributes<RateRef>>;
|
||||
export default Rate;
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _StarFilled = _interopRequireDefault(require("@ant-design/icons/StarFilled"));
|
||||
var _rate = _interopRequireDefault(require("@rc-component/rate"));
|
||||
var _clsx = require("clsx");
|
||||
var _is = require("../_util/is");
|
||||
var _context = require("../config-provider/context");
|
||||
var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
|
||||
var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
|
||||
var _tooltip = _interopRequireDefault(require("../tooltip"));
|
||||
var _style = _interopRequireDefault(require("./style"));
|
||||
const Rate = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
prefixCls,
|
||||
className,
|
||||
rootClassName,
|
||||
style,
|
||||
tooltips,
|
||||
character = /*#__PURE__*/React.createElement(_StarFilled.default, null),
|
||||
disabled: customDisabled,
|
||||
size,
|
||||
...rest
|
||||
} = props;
|
||||
const characterRender = (node, {
|
||||
index
|
||||
}) => {
|
||||
if (!tooltips) {
|
||||
return node;
|
||||
}
|
||||
const tooltipsItem = tooltips[index];
|
||||
if ((0, _is.isPlainObject)(tooltipsItem)) {
|
||||
return /*#__PURE__*/React.createElement(_tooltip.default, {
|
||||
...tooltipsItem
|
||||
}, node);
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(_tooltip.default, {
|
||||
title: tooltipsItem
|
||||
}, node);
|
||||
};
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction,
|
||||
className: contextClassName,
|
||||
style: contextStyle
|
||||
} = (0, _context.useComponentConfig)('rate');
|
||||
const ratePrefixCls = getPrefixCls('rate', prefixCls);
|
||||
// Style
|
||||
const [hashId, cssVarCls] = (0, _style.default)(ratePrefixCls);
|
||||
const mergedStyle = {
|
||||
...contextStyle,
|
||||
...style
|
||||
};
|
||||
// ===================== Disabled =====================
|
||||
const disabled = React.useContext(_DisabledContext.default);
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
// ===================== Size =====================
|
||||
const mergedSize = (0, _useSize.default)(ctx => size ?? ctx);
|
||||
return /*#__PURE__*/React.createElement(_rate.default, {
|
||||
ref: ref,
|
||||
character: character,
|
||||
characterRender: characterRender,
|
||||
disabled: mergedDisabled,
|
||||
...rest,
|
||||
className: (0, _clsx.clsx)({
|
||||
[`${ratePrefixCls}-large`]: mergedSize === 'large',
|
||||
[`${ratePrefixCls}-small`]: mergedSize === 'small'
|
||||
}, className, rootClassName, hashId, cssVarCls, contextClassName),
|
||||
style: mergedStyle,
|
||||
prefixCls: ratePrefixCls,
|
||||
direction: direction
|
||||
});
|
||||
});
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Rate.displayName = 'Rate';
|
||||
}
|
||||
var _default = exports.default = Rate;
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GetDefaultToken } from '../../theme/internal';
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 星星颜色
|
||||
* @descEN Star color
|
||||
*/
|
||||
starColor: string;
|
||||
/**
|
||||
* @desc 星星尺寸
|
||||
* @descEN Star size
|
||||
*/
|
||||
starSize: number;
|
||||
/**
|
||||
* @desc 小星星尺寸
|
||||
* @descEN Small star size
|
||||
*/
|
||||
starSizeSM: number;
|
||||
/**
|
||||
* @desc 大星星尺寸
|
||||
* @descEN Large star size
|
||||
*/
|
||||
starSizeLG: number;
|
||||
/**
|
||||
* @desc 星星悬浮时的缩放
|
||||
* @descEN Scale of star when hover
|
||||
*/
|
||||
starHoverScale: CSSObject['transform'];
|
||||
/**
|
||||
* @desc 星星背景色
|
||||
* @descEN Star background color
|
||||
*/
|
||||
starBg: string;
|
||||
}
|
||||
export declare const prepareComponentToken: GetDefaultToken<'Rate'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
|
||||
export default _default;
|
||||
+112
@@ -0,0 +1,112 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.prepareComponentToken = exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _style = require("../../style");
|
||||
var _internal = require("../../theme/internal");
|
||||
const genRateStarStyle = token => {
|
||||
const {
|
||||
componentCls
|
||||
} = token;
|
||||
return {
|
||||
[`${componentCls}-star`]: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
color: 'inherit',
|
||||
cursor: 'pointer',
|
||||
'&:not(:last-child)': {
|
||||
marginInlineEnd: token.marginXS
|
||||
},
|
||||
'> div': {
|
||||
transition: `all ${token.motionDurationMid}, outline 0s`,
|
||||
'&:hover': {
|
||||
transform: token.starHoverScale
|
||||
},
|
||||
'&:focus': {
|
||||
outline: 0
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: `${(0, _cssinjs.unit)(token.lineWidth)} dashed ${token.starColor}`,
|
||||
transform: token.starHoverScale
|
||||
}
|
||||
},
|
||||
'&-first, &-second': {
|
||||
color: token.starBg,
|
||||
transition: `all ${token.motionDurationMid}`,
|
||||
userSelect: 'none'
|
||||
},
|
||||
'&-first': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineStart: 0,
|
||||
width: '50%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
opacity: 0
|
||||
},
|
||||
[`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
|
||||
opacity: 1
|
||||
},
|
||||
[`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
|
||||
color: 'inherit'
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
const genRateRtlStyle = token => ({
|
||||
[`&-rtl${token.componentCls}`]: {
|
||||
direction: 'rtl'
|
||||
}
|
||||
});
|
||||
const genRateStyle = token => {
|
||||
const {
|
||||
componentCls
|
||||
} = token;
|
||||
return {
|
||||
[componentCls]: {
|
||||
...(0, _style.resetComponent)(token),
|
||||
display: 'inline-block',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
color: token.starColor,
|
||||
fontSize: token.starSize,
|
||||
lineHeight: 1,
|
||||
listStyle: 'none',
|
||||
outline: 'none',
|
||||
'&-small': {
|
||||
fontSize: token.starSizeSM
|
||||
},
|
||||
'&-large': {
|
||||
fontSize: token.starSizeLG
|
||||
},
|
||||
// disable styles
|
||||
[`&-disabled${componentCls} ${componentCls}-star`]: {
|
||||
cursor: 'default',
|
||||
'> div:hover': {
|
||||
transform: 'scale(1)'
|
||||
}
|
||||
},
|
||||
// star styles
|
||||
...genRateStarStyle(token),
|
||||
// rtl styles
|
||||
...genRateRtlStyle(token)
|
||||
}
|
||||
};
|
||||
};
|
||||
// ============================== Export ==============================
|
||||
const prepareComponentToken = token => ({
|
||||
starColor: token.yellow6,
|
||||
starSize: token.controlHeight * 0.625,
|
||||
starSizeSM: token.controlHeightSM * 0.625,
|
||||
starSizeLG: token.controlHeightLG * 0.625,
|
||||
starHoverScale: 'scale(1.1)',
|
||||
starBg: token.colorFillContent
|
||||
});
|
||||
exports.prepareComponentToken = prepareComponentToken;
|
||||
var _default = exports.default = (0, _internal.genStyleHooks)('Rate', token => {
|
||||
const rateToken = (0, _internal.mergeToken)(token, {});
|
||||
return genRateStyle(rateToken);
|
||||
}, prepareComponentToken);
|
||||
Reference in New Issue
Block a user