From ea2480490dcc38585904742bbabb9d90b2c807c9 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Tue, 8 Sep 2020 13:21:11 +0800 Subject: [PATCH] refactor(tooltip): use cssr --- src/Tooltip/index.js | 7 - src/_styles/index.scss | 4 - src/index.js | 2 +- src/menu/src/MenuItem.vue | 2 +- src/popover/src/PopoverContent.js | 2 +- src/popover/src/styles/themed-base.cssr.js | 250 ++++++++++++--------- src/popover/styles/dark.js | 11 +- src/popover/styles/light.js | 10 +- src/tooltip/index.js | 7 + src/{Tooltip => tooltip}/src/main.js | 8 +- src/tooltip/src/styles/index.js | 11 + src/tooltip/src/styles/themed-base.cssr.js | 6 + src/tooltip/styles/dark.js | 13 ++ src/tooltip/styles/light.js | 13 ++ 14 files changed, 207 insertions(+), 139 deletions(-) delete mode 100644 src/Tooltip/index.js create mode 100644 src/tooltip/index.js rename src/{Tooltip => tooltip}/src/main.js (84%) create mode 100644 src/tooltip/src/styles/index.js create mode 100644 src/tooltip/src/styles/themed-base.cssr.js create mode 100644 src/tooltip/styles/dark.js create mode 100644 src/tooltip/styles/light.js diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js deleted file mode 100644 index 3992faf3a..000000000 --- a/src/Tooltip/index.js +++ /dev/null @@ -1,7 +0,0 @@ -import Tooltip from './src/main.js' - -Tooltip.install = function (Vue) { - Vue.component(Tooltip.name, Tooltip) -} - -export default Tooltip diff --git a/src/_styles/index.scss b/src/_styles/index.scss index c3de3b6b8..00c078c02 100644 --- a/src/_styles/index.scss +++ b/src/_styles/index.scss @@ -5,8 +5,4 @@ @import './Descriptions.scss'; @import './Form.scss'; -// @import './Popover.scss'; -// @import './Tabs.scss'; -// @import './Table.scss'; -@import './Tooltip.scss'; @import './Upload.scss'; \ No newline at end of file diff --git a/src/index.js b/src/index.js index a86145ce9..b676b7d54 100644 --- a/src/index.js +++ b/src/index.js @@ -63,7 +63,7 @@ import Thing from './thing' import Time from './time' import TimePicker from './time-picker' import Timeline from './timeline' -import Tooltip from './Tooltip' +import Tooltip from './tooltip' import Transfer from './transfer' import Tree from './tree' import Typography from './typography' diff --git a/src/menu/src/MenuItem.vue b/src/menu/src/MenuItem.vue index 00cd82dcf..474ed304c 100644 --- a/src/menu/src/MenuItem.vue +++ b/src/menu/src/MenuItem.vue @@ -60,7 +60,7 @@ import withapp from '../../_mixins/withapp' import themeable from '../../_mixins/themeable' import simulatedComputed from '../../_mixins/simulatedComputed' import NMenuItemContent from './MenuItemContent' -import NTooltip from '../../Tooltip' +import NTooltip from '../../tooltip' import menuContentMixin from './menuContentMixin' export default { diff --git a/src/popover/src/PopoverContent.js b/src/popover/src/PopoverContent.js index fbc6f1d59..8f8900d3d 100644 --- a/src/popover/src/PopoverContent.js +++ b/src/popover/src/PopoverContent.js @@ -278,7 +278,7 @@ export default { }, [ h('transition', { props: { - name: 'n-popover-content-transition' + name: 'popover-content-transition' }, on: { enter: () => { diff --git a/src/popover/src/styles/themed-base.cssr.js b/src/popover/src/styles/themed-base.cssr.js index 8d6441a01..dc8be1366 100644 --- a/src/popover/src/styles/themed-base.cssr.js +++ b/src/popover/src/styles/themed-base.cssr.js @@ -1,73 +1,7 @@ -import { c, cB, cM } from '../../../_utils/cssr' +import { c, cTB, cB, cM } from '../../../_utils/cssr' import depx from '../../../_utils/css/depx' import pxfy from '../../../_utils/css/pxfy' -function popoverContentTransition (pallete, easeOutCubicBezier, easeInCubicBezier) { - return [ - c('&&-transition-enter-to, &&-transition-leave', { - raw: ` - transform: ${pallete.transformDebounceScale}; - opacity: 1; - ` - }), - c('&&-transition-enter, &&-transition-leave-to', { - raw: ` - opacity: 0; - transform: scale(.85); - ` - }), - c('&&-transition-enter-active', { - raw: ` - transition: opacity .15s ${easeOutCubicBezier}, transform .15s ${easeOutCubicBezier}; - ` - }), - c('&&-transition-leave-active', { - raw: ` - transition: opacity .15s ${easeInCubicBezier}, transform .15s ${easeInCubicBezier}; - ` - }) - ] -} -function noArrowNPlaceMixin (direction) { - return c(`&[n-placement$="${direction}"]`, { - raw: ` - margin-bottom: 6px; - ` - }) -} -const oppsiteDirection = { - top: 'bottom', - bottom: 'top', - left: 'right', - right: 'left' -} -function nPlacementMixin (pallete, direction, popoverArrowContent) { - const finalDirection = direction.split('-')[0] - return c(`&[n-placement$="${direction}"]`, { - raw: ` - margin-${oppsiteDirection[finalDirection]}: 10px; - ` - }, [ - cB('popover-arrow-wrapper', { - raw: ` - right: 0; - left: 0; - top: 0; - bottom: 0; - ${finalDirection}: 100%; - ${oppsiteDirection[finalDirection]}: auto; - height: ${pxfy(depx(pallete.arrowWidth) * 2)}; - ` - }, [ - cB('popover-arrow', { - raw: ` - ${popoverArrowContent} - ` - }) - ]) - ]) -} - export default c([ ({ props }) => { const { @@ -78,15 +12,13 @@ export default c([ borderRadius, arrowWidth } = props.$local - const { easeInOutCubicBezier, easeInCubicBezier, easeOutCubicBezier } = props.$base - const pallete = props.$local return [ - cB('popover-content', { + cTB('popover-content', { raw: ` transition: background-color .3s ${easeInOutCubicBezier}, @@ -98,9 +30,14 @@ export default c([ color: ${textColor}; ` }, [ - popoverContentTransition(pallete, easeOutCubicBezier, easeInCubicBezier), + contentTransition( + transformDebounceScale, + easeOutCubicBezier, + easeInCubicBezier + ), cM('styled', { raw: ` + background-color: ${color}; border-radius: ${borderRadius}; padding: 8px 14px; ` @@ -126,12 +63,13 @@ export default c([ display: block; width: ${pxfy(depx(arrowWidth) * 2)}; height: ${pxfy(depx(arrowWidth) * 2)}; - box-shadow: ${boxShadow}; + box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12); transform: rotate(45deg); + background-color: ${color}; ` }) ]), - cM('no-arrow', [ + cM('no-arrow', [ 'top', 'top-start', 'top-end', @@ -144,90 +82,178 @@ export default c([ 'right-start', 'right', 'right-end' - ].map(direction => noArrowNPlaceMixin(direction)) - ]), - nPlacementMixin(pallete, 'top-start', - ` + ].map(direction => noArrowStyle(direction)) + ), + placementStyle(arrowWidth, 'top-start', ` top: -${arrowWidth}; left: 10px; `), - nPlacementMixin(pallete, 'top', - ` + placementStyle(arrowWidth, 'top', ` top: -${arrowWidth}; transform: translateX(-${arrowWidth}) rotate(45deg) ; left: 50%; `), - nPlacementMixin(pallete, 'top-end', - ` + placementStyle(arrowWidth, 'top-end', ` top: -${arrowWidth}; right: 10px; `), - nPlacementMixin(pallete, 'bottom-start', - ` + placementStyle(arrowWidth, 'bottom-start', ` bottom: -${arrowWidth}; left: 10px; `), - nPlacementMixin(pallete, 'bottom', - ` + placementStyle(arrowWidth, 'bottom', ` bottom: -${arrowWidth}; transform: translateX(-${arrowWidth}) rotate(45deg) ; left: 50%; `), - nPlacementMixin(pallete, 'bottom-end', - ` + placementStyle(arrowWidth, 'bottom-end', ` bottom: -${arrowWidth}; right: 10px; `), - nPlacementMixin(pallete, 'left-start', - ` + placementStyle(arrowWidth, 'left-start', ` left: -${arrowWidth}; top: 10px; `), - nPlacementMixin(pallete, 'left', - ` + placementStyle(arrowWidth, 'left', ` left: -${arrowWidth}; transform: translateY(-${arrowWidth}) rotate(45deg) ; top: 50%; `), - nPlacementMixin(pallete, 'left-end', - ` + placementStyle(arrowWidth, 'left-end', ` left: -${arrowWidth}; bottom: 10px; `), - nPlacementMixin(pallete, 'right-start', - ` + placementStyle(arrowWidth, 'right-start', ` right: -${arrowWidth}; top: 10px; `), - nPlacementMixin(pallete, 'right', - ` + placementStyle(arrowWidth, 'right', ` right: -${arrowWidth}; transform: translateY(-${arrowWidth}) rotate(45deg) ; top: 50%; `), - nPlacementMixin(pallete, 'right-end', - ` + placementStyle(arrowWidth, 'right-end', ` right: -${arrowWidth}; bottom: 10px; `), - cM('styled', { - raw: ` - background-color: ${color}; - ` - }), - cB('popover-arrow-wrapper', [ - cB('popover-arrow', { - raw: ` - background-color: ${color}; - ` - }) - ]), cM('shadow', { raw: ` box-shadow: ${boxShadow}; ` }) - ]) + ]), + tooltipStyle(props.$local) ] } ]) + +function tooltipStyle (pallete) { + const { + borderRadius, + boxShadow, + tooltipColor, + tooltipTextColor + } = pallete + return cB('tooltip', [ + cTB('tooltip-content', { + raw: ` + padding: 8px 14px; + border-radius: ${borderRadius}; + box-shadow: ${boxShadow}; + background-color: ${tooltipColor}; + color: ${tooltipTextColor}; + ` + }, [ + cB('popover-arrow-wrapper', [ + cB('popover-arrow', { + backgroundColor: tooltipColor + }) + ]) + ]) + ]) +} + +const oppositePlacement = { + top: 'bottom', + bottom: 'top', + left: 'right', + right: 'left' +} + +function placementStyle ( + arrowWidth, + placement, + arrowStyleLiteral +) { + const arrowWrapperSpace = pxfy(depx(arrowWidth) * 2) + const approximatePlacement = placement.split('-')[0] + const sizeStyle = ['top', 'bottom'].includes(approximatePlacement) ? { + height: arrowWrapperSpace + } : { width: arrowWrapperSpace } + return c(`&[n-placement$="${placement}"]`, { + raw: ` + margin-${oppositePlacement[approximatePlacement]}: 10px; + ` + }, [ + cB('popover-arrow-wrapper', { + raw: ` + right: 0; + left: 0; + top: 0; + bottom: 0; + ${approximatePlacement}: 100%; + ${oppositePlacement[approximatePlacement]}: auto; + `, + ...sizeStyle + }, [ + cB('popover-arrow', { + raw: arrowStyleLiteral + }) + ]) + ]) +} + +function noArrowStyle (placement) { + const approximatePlacement = placement.split('-')[0] + return c(`&[n-placement$="${placement}"]`, { + raw: ` + margin-${approximatePlacement}: 6px; + margin-${oppositePlacement[approximatePlacement]}: 6px; + ` + }) +} + +function contentTransition ( + transformDebounceScale, + easeOutCubicBezier, + easeInCubicBezier +) { + return [ + c('&.popover-content-transition-enter-to, &.popover-content-transition-leave', { + raw: ` + transform: ${transformDebounceScale}; + opacity: 1; + ` + }), + c('&.popover-content-transition-enter, &.popover-content-transition-leave-to', { + raw: ` + opacity: 0; + transform: scale(.85); + ` + }), + c('&.popover-content-transition-enter-active', { + raw: ` + transition: + opacity .15s ${easeOutCubicBezier}, + transform .15s ${easeOutCubicBezier}; + ` + }), + c('&.popover-content-transition-leave-active', { + raw: ` + transition: + opacity .15s ${easeInCubicBezier}, + transform .15s ${easeInCubicBezier}; + ` + }) + ] +} diff --git a/src/popover/styles/dark.js b/src/popover/styles/dark.js index 82961a67e..73f00b5d9 100644 --- a/src/popover/styles/dark.js +++ b/src/popover/styles/dark.js @@ -7,20 +7,19 @@ export default create({ getDerivedVariables ({ base, derived }) { const { popoverBackgroundColor, - secondaryTextOverlayColor, - popoverBoxShadow + secondaryTextOverlayColor } = derived const { - borderRadius, - transformDebounceScale + borderRadius } = base return { ...commonVariables, borderRadius, color: popoverBackgroundColor, textColor: secondaryTextOverlayColor, - boxShadow: popoverBoxShadow, - transformDebounceScale + boxShadow: '0 2px 8px 0 rgba(0, 0, 0, .12)', + tooltipColor: popoverBackgroundColor, + tooltipTextColor: secondaryTextOverlayColor } } }) diff --git a/src/popover/styles/light.js b/src/popover/styles/light.js index fb0d1224d..0381b35f9 100644 --- a/src/popover/styles/light.js +++ b/src/popover/styles/light.js @@ -8,19 +8,19 @@ export default create({ const { popoverBackgroundColor, secondaryTextColor, - popoverBoxShadow + baseBackgroundColor } = derived const { - borderRadius, - transformDebounceScale + borderRadius } = base return { ...commonVariables, borderRadius, color: popoverBackgroundColor, textColor: secondaryTextColor, - boxShadow: popoverBoxShadow, - transformDebounceScale + boxShadow: '0 2px 8px 0 rgba(0, 0, 0, .12)', + tooltipColor: 'rgba(0, 0, 0, .85)', + tooltipTextColor: baseBackgroundColor } } }) diff --git a/src/tooltip/index.js b/src/tooltip/index.js new file mode 100644 index 000000000..d46a8f07f --- /dev/null +++ b/src/tooltip/index.js @@ -0,0 +1,7 @@ +import Tooltip from './src/main.js' + +Tooltip.install = function (Vue, naive) { + Vue.component(naive.componentPrefix + Tooltip.name, Tooltip) +} + +export default Tooltip diff --git a/src/Tooltip/src/main.js b/src/tooltip/src/main.js similarity index 84% rename from src/Tooltip/src/main.js rename to src/tooltip/src/main.js index 6c6a95776..08a1760b8 100644 --- a/src/Tooltip/src/main.js +++ b/src/tooltip/src/main.js @@ -4,10 +4,14 @@ import NPopover from '../../popover' export default { - name: 'NTooltip', + name: 'Tooltip', functional: true, props: { - ...NPopover.props + ...NPopover.props, + showArrow: { + type: Boolean, + default: false + } }, render (h, context) { const slots = context.scopedSlots diff --git a/src/tooltip/src/styles/index.js b/src/tooltip/src/styles/index.js new file mode 100644 index 000000000..3b04bf0e9 --- /dev/null +++ b/src/tooltip/src/styles/index.js @@ -0,0 +1,11 @@ +import themedBaseStyle from './themed-base.cssr.js' + +export default [ + { + key: 'syntheticTheme', + watch: [ + 'syntheticTheme' + ], + CNode: themedBaseStyle + } +] diff --git a/src/tooltip/src/styles/themed-base.cssr.js b/src/tooltip/src/styles/themed-base.cssr.js new file mode 100644 index 000000000..4424467cd --- /dev/null +++ b/src/tooltip/src/styles/themed-base.cssr.js @@ -0,0 +1,6 @@ +import { c, cTB, cB, cE, cM, cNotM } from '../../../_utils/cssr' + +export default c([ + ({ props }) => { + } +]) diff --git a/src/tooltip/styles/dark.js b/src/tooltip/styles/dark.js new file mode 100644 index 000000000..fc1b42a8b --- /dev/null +++ b/src/tooltip/styles/dark.js @@ -0,0 +1,13 @@ +import create from '../../styles/_utils/create-component-base' +import popoverStyle from '../../popover/styles/dark' + +export default create({ + theme: 'dark', + name: 'Tooltip', + peer: [ + popoverStyle + ], + getDerivedVariables ({ base, derived }) { + return {} + } +}) diff --git a/src/tooltip/styles/light.js b/src/tooltip/styles/light.js new file mode 100644 index 000000000..17302b46a --- /dev/null +++ b/src/tooltip/styles/light.js @@ -0,0 +1,13 @@ +import create from '../../styles/_utils/create-component-base' +import popoverStyle from '../../popover/styles/light' + +export default create({ + theme: 'light', + name: 'Tooltip', + peer: [ + popoverStyle + ], + getDerivedVariables ({ base, derived }) { + return {} + } +})