From d2e9b016addf1cebc8563810e8026e9bcebfb99a Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 18 Jan 2021 23:45:11 +0800 Subject: [PATCH] refactor(rate): ts --- src/rate/index.js | 2 - src/rate/index.ts | 2 + src/rate/src/Rate.tsx | 133 ++++++++++++++++++ src/rate/src/Rate.vue | 105 -------------- src/rate/src/StarIcon.tsx | 7 + src/rate/src/StarIcon.vue | 7 - .../styles/{index.cssr.js => index.cssr.ts} | 0 src/rate/styles/{dark.js => dark.ts} | 5 +- src/rate/styles/index.js | 2 - src/rate/styles/index.ts | 3 + src/rate/styles/light.js | 14 -- src/rate/styles/light.ts | 22 +++ 12 files changed, 171 insertions(+), 131 deletions(-) delete mode 100644 src/rate/index.js create mode 100644 src/rate/index.ts create mode 100644 src/rate/src/Rate.tsx delete mode 100644 src/rate/src/Rate.vue create mode 100644 src/rate/src/StarIcon.tsx delete mode 100644 src/rate/src/StarIcon.vue rename src/rate/src/styles/{index.cssr.js => index.cssr.ts} (100%) rename src/rate/styles/{dark.js => dark.ts} (73%) delete mode 100644 src/rate/styles/index.js create mode 100644 src/rate/styles/index.ts delete mode 100644 src/rate/styles/light.js create mode 100644 src/rate/styles/light.ts diff --git a/src/rate/index.js b/src/rate/index.js deleted file mode 100644 index 31c694f9e..000000000 --- a/src/rate/index.js +++ /dev/null @@ -1,2 +0,0 @@ -/* istanbul ignore file */ -export { default as NRate } from './src/Rate.vue' diff --git a/src/rate/index.ts b/src/rate/index.ts new file mode 100644 index 000000000..dae2e7ae4 --- /dev/null +++ b/src/rate/index.ts @@ -0,0 +1,2 @@ +/* istanbul ignore file */ +export { default as NRate } from './src/Rate' diff --git a/src/rate/src/Rate.tsx b/src/rate/src/Rate.tsx new file mode 100644 index 000000000..203f96560 --- /dev/null +++ b/src/rate/src/Rate.tsx @@ -0,0 +1,133 @@ +import { + h, + toRef, + ref, + computed, + defineComponent, + renderList, + VNode, + PropType, + CSSProperties +} from 'vue' +import { useMergedState } from 'vooks' +import { NBaseIcon } from '../../_base' +import { useTheme, useFormItem } from '../../_mixins' +import type { ThemeProps } from '../../_mixins' +import { call } from '../../_utils' +import type { MaybeArray } from '../../_utils' +import { rateLight } from '../styles' +import type { RateTheme } from '../styles' +import style from './styles/index.cssr' +import StarIcon from './StarIcon' + +export default defineComponent({ + name: 'Rate', + components: { + NBaseIcon, + StarIcon + }, + props: { + ...(useTheme.props as ThemeProps), + count: { + type: Number, + default: 5 + }, + value: { + type: Number, + default: undefined + }, + defaultValue: { + type: Number, + default: 0 + }, + size: { + type: String as PropType<'small' | 'medium' | 'large'>, + default: 'medium' + }, + // eslint-disable-next-line vue/prop-name-casing + 'onUpdate:value': { + type: [Function, Array] as PropType void>>, + default: undefined + } + }, + setup (props) { + const themeRef = useTheme('Rate', 'Rate', style, rateLight, props) + const controlledValueRef = toRef(props, 'value') + const uncontrolledValueRef = ref(props.defaultValue) + const hoverIndexRef = ref(null) + const formItem = useFormItem(props) + function doUpdateValue (value: number): void { + const { 'onUpdate:value': onUpdateValue } = props + const { nTriggerFormChange, nTriggerFormInput } = formItem + if (onUpdateValue) { + call(onUpdateValue, value) + } + uncontrolledValueRef.value = value + nTriggerFormChange() + nTriggerFormInput() + } + function handleMouseEnter (index: number): void { + hoverIndexRef.value = index + } + function handleMouseLeave (): void { + hoverIndexRef.value = null + } + function handleClick (index: number): void { + doUpdateValue(index + 1) + } + return { + mergedValue: useMergedState(controlledValueRef, uncontrolledValueRef), + hoverIndex: hoverIndexRef, + handleMouseEnter, + handleClick, + handleMouseLeave, + cssVars: computed(() => { + const { + common: { cubicBezierEaseInOut }, + self: { itemColor, itemColorActive, itemSize } + } = themeRef.value + return { + '--bezier': cubicBezierEaseInOut, + '--item-color': itemColor, + '--item-color-active': itemColorActive, + '--item-size': itemSize + } + }) + } + }, + render () { + const { hoverIndex, mergedValue } = this + return ( +
+ {renderList( + this.count, + (_, index) => + ( +
this.handleClick(index)} + onMouseenter={() => this.handleMouseEnter(index)} + > + + + +
+ ) as VNode + )} +
+ ) + } +}) diff --git a/src/rate/src/Rate.vue b/src/rate/src/Rate.vue deleted file mode 100644 index 531646b3c..000000000 --- a/src/rate/src/Rate.vue +++ /dev/null @@ -1,105 +0,0 @@ - - - diff --git a/src/rate/src/StarIcon.tsx b/src/rate/src/StarIcon.tsx new file mode 100644 index 000000000..e3ca549e7 --- /dev/null +++ b/src/rate/src/StarIcon.tsx @@ -0,0 +1,7 @@ +import { h } from 'vue' + +export default ( + + + +) diff --git a/src/rate/src/StarIcon.vue b/src/rate/src/StarIcon.vue deleted file mode 100644 index 02703309d..000000000 --- a/src/rate/src/StarIcon.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/rate/src/styles/index.cssr.js b/src/rate/src/styles/index.cssr.ts similarity index 100% rename from src/rate/src/styles/index.cssr.js rename to src/rate/src/styles/index.cssr.ts diff --git a/src/rate/styles/dark.js b/src/rate/styles/dark.ts similarity index 73% rename from src/rate/styles/dark.js rename to src/rate/styles/dark.ts index 7416f0fe1..7f3d06234 100644 --- a/src/rate/styles/dark.js +++ b/src/rate/styles/dark.ts @@ -1,6 +1,7 @@ import { commonDark } from '../../_styles/new-common' +import { RateTheme } from './light' -export default { +const rateDark: RateTheme = { name: 'Rate', common: commonDark, self (vars) { @@ -12,3 +13,5 @@ export default { } } } + +export default rateDark diff --git a/src/rate/styles/index.js b/src/rate/styles/index.js deleted file mode 100644 index fec7c9e1b..000000000 --- a/src/rate/styles/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as rateDark } from './dark.js' -export { default as rateLight } from './light.js' diff --git a/src/rate/styles/index.ts b/src/rate/styles/index.ts new file mode 100644 index 000000000..1a5993368 --- /dev/null +++ b/src/rate/styles/index.ts @@ -0,0 +1,3 @@ +export { default as rateDark } from './dark' +export { default as rateLight } from './light' +export type { RateTheme, RateThemeVars } from './light' diff --git a/src/rate/styles/light.js b/src/rate/styles/light.js deleted file mode 100644 index fc8517ae6..000000000 --- a/src/rate/styles/light.js +++ /dev/null @@ -1,14 +0,0 @@ -import { commonLight } from '../../_styles/new-common' - -export default { - name: 'Rate', - common: commonLight, - self (vars) { - const { railColor } = vars - return { - itemColor: railColor, - itemColorActive: '#FFCC33', - itemSize: '20px' - } - } -} diff --git a/src/rate/styles/light.ts b/src/rate/styles/light.ts new file mode 100644 index 000000000..9d35ad337 --- /dev/null +++ b/src/rate/styles/light.ts @@ -0,0 +1,22 @@ +import { commonLight } from '../../_styles/new-common' +import type { ThemeCommonVars } from '../../_styles/new-common' + +const self = (vars: ThemeCommonVars) => { + const { railColor } = vars + return { + itemColor: railColor, + itemColorActive: '#FFCC33', + itemSize: '20px' + } +} + +export type RateThemeVars = ReturnType + +const themeLight = { + name: 'Rate', + common: commonLight, + self +} + +export default themeLight +export type RateTheme = typeof themeLight