From 1bf87789f265b09dac317608ee889d1a7e64e3fd Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Wed, 16 Dec 2020 01:50:16 +0800 Subject: [PATCH] refactor(base-select-menu, base-selection): merge size style --- src/_base/select-menu/src/styles/index.js | 6 - .../select-menu/src/styles/themed-base.js | 123 ++++++++++++------ .../select-menu/src/styles/themed-size.js | 39 ------ src/_base/selection/src/styles/index.js | 6 - src/_base/selection/src/styles/themed-base.js | 43 +++++- src/_base/selection/src/styles/themed-size.js | 45 ------- 6 files changed, 121 insertions(+), 141 deletions(-) delete mode 100644 src/_base/select-menu/src/styles/themed-size.js delete mode 100644 src/_base/selection/src/styles/themed-size.js diff --git a/src/_base/select-menu/src/styles/index.js b/src/_base/select-menu/src/styles/index.js index 8fc74637e..cddd512a0 100644 --- a/src/_base/select-menu/src/styles/index.js +++ b/src/_base/select-menu/src/styles/index.js @@ -1,15 +1,9 @@ import baseStyle from './themed-base.js' -import sizeStyle from './themed-size' export default [ { key: 'theme', watch: ['theme'], CNode: baseStyle - }, - { - key: 'size', - watch: ['size', 'theme'], - CNode: sizeStyle } ] diff --git a/src/_base/select-menu/src/styles/themed-base.js b/src/_base/select-menu/src/styles/themed-base.js index d2e52b91b..69576c1b9 100644 --- a/src/_base/select-menu/src/styles/themed-base.js +++ b/src/_base/select-menu/src/styles/themed-base.js @@ -1,8 +1,12 @@ -import { cTB, c, cB, cE, cM, cNotM } from '../../../../_utils/cssr' +import { cTB, c, cB, cE, cM, cNotM, createKey } from '../../../../_utils/cssr' +import { depx, pxfy } from 'seemly' export default c([ ({ props }) => { - const { cubicBezierEaseInOut } = props.$global + const { + $global: { cubicBezierEaseInOut }, + $local + } = props const { borderRadius, color, @@ -22,21 +26,54 @@ export default c([ 'base-select-menu', { raw: ` - outline: none; - margin-top: 4px; - margin-bottom: 4px; - z-index: 0; - position: relative; - border-radius: ${borderRadius}; - transition: - background-color .3s ${cubicBezierEaseInOut}, - box-shadow .3s ${cubicBezierEaseInOut}; - overflow: hidden; - background-color: ${color}; - box-shadow: ${boxShadow}; - ` + outline: none; + margin-top: 4px; + margin-bottom: 4px; + z-index: 0; + position: relative; + border-radius: ${borderRadius}; + transition: + background-color .3s ${cubicBezierEaseInOut}, + box-shadow .3s ${cubicBezierEaseInOut}; + overflow: hidden; + background-color: ${color}; + box-shadow: ${boxShadow}; + ` }, [ + ['small', 'medium', 'large'].map((size) => { + const { + [createKey('optionFontSize', size)]: fontSize, + [createKey('optionHeight', size)]: optionHeight, + [createKey('padding', size)]: padding + } = $local + const groupHeaderFontSize = pxfy(depx(fontSize) - 2) + const menuHeight = pxfy(depx(optionHeight) * 7.6) + return cM( + size + '-size', + { + padding + }, + [ + cB('scrollbar', { + maxHeight: menuHeight + }), + cB('virtual-list', { + maxHeight: menuHeight + }), + cB('base-select-option', { + height: optionHeight, + lineHeight: optionHeight, + fontSize: fontSize + }), + cB('base-select-group-header', { + height: optionHeight, + lineHeight: optionHeight, + fontSize: groupHeaderFontSize + }) + ] + ) + }), cB('base-select-menu-option-wrapper', { position: 'relative', width: '100%' @@ -61,20 +98,20 @@ export default c([ 'base-select-option', { raw: ` - cursor: pointer; - position: relative; - padding: 0 14px; - white-space: nowrap; - transition: - background-color .3s ${cubicBezierEaseInOut}, - color .3s ${cubicBezierEaseInOut}, - opacity .3s ${cubicBezierEaseInOut}; - text-overflow: ellipsis; - overflow: hidden; - box-sizing: border-box; - color: ${optionTextColor}; - opacity: 1; - ` + cursor: pointer; + position: relative; + padding: 0 14px; + white-space: nowrap; + transition: + background-color .3s ${cubicBezierEaseInOut}, + color .3s ${cubicBezierEaseInOut}, + opacity .3s ${cubicBezierEaseInOut}; + text-overflow: ellipsis; + overflow: hidden; + box-sizing: border-box; + color: ${optionTextColor}; + opacity: 1; + ` }, [ c('&:active', { @@ -121,20 +158,20 @@ export default c([ ]), c('&::after', { raw: ` - content: ''; - height: 6px; - width: 3px; - position: absolute; - right: 14px; - transform: rotate(45deg) scale(.5); - top: calc(50% - 4px); - opacity: 0; - transition: - transform .3s ${cubicBezierEaseInOut}, - opacity .3s ${cubicBezierEaseInOut}; - border-right: 1px solid ${optionCheckColor}; - border-bottom: 1px solid ${optionCheckColor}; - ` + content: ''; + height: 6px; + width: 3px; + position: absolute; + right: 14px; + transform: rotate(45deg) scale(.5); + top: calc(50% - 4px); + opacity: 0; + transition: + transform .3s ${cubicBezierEaseInOut}, + opacity .3s ${cubicBezierEaseInOut}; + border-right: 1px solid ${optionCheckColor}; + border-bottom: 1px solid ${optionCheckColor}; + ` }) ] ) diff --git a/src/_base/select-menu/src/styles/themed-size.js b/src/_base/select-menu/src/styles/themed-size.js deleted file mode 100644 index dbc008b52..000000000 --- a/src/_base/select-menu/src/styles/themed-size.js +++ /dev/null @@ -1,39 +0,0 @@ -import { cTB, c, cB, cM, createKey } from '../../../../_utils/cssr' -import { depx, pxfy } from 'seemly' - -export default c([ - ({ props }) => { - const size = props.$vm.size - const fontSize = props.$local[createKey('optionFontSize', size)] - const optionHeight = props.$local[createKey('optionHeight', size)] - const groupHeaderFontSize = pxfy(depx(fontSize) - 2) - const menuHeight = pxfy(depx(optionHeight) * 7.6) - const padding = props.$local[createKey('padding', size)] - return cTB('base-select-menu', [ - cM( - size + '-size', - { - padding - }, - [ - cB('scrollbar', { - maxHeight: menuHeight - }), - cB('virtual-list', { - maxHeight: menuHeight - }), - cB('base-select-option', { - height: optionHeight, - lineHeight: optionHeight, - fontSize: fontSize - }), - cB('base-select-group-header', { - height: optionHeight, - lineHeight: optionHeight, - fontSize: groupHeaderFontSize - }) - ] - ) - ]) - } -]) diff --git a/src/_base/selection/src/styles/index.js b/src/_base/selection/src/styles/index.js index 8fc74637e..cddd512a0 100644 --- a/src/_base/selection/src/styles/index.js +++ b/src/_base/selection/src/styles/index.js @@ -1,15 +1,9 @@ import baseStyle from './themed-base.js' -import sizeStyle from './themed-size' export default [ { key: 'theme', watch: ['theme'], CNode: baseStyle - }, - { - key: 'size', - watch: ['size', 'theme'], - CNode: sizeStyle } ] diff --git a/src/_base/selection/src/styles/themed-base.js b/src/_base/selection/src/styles/themed-base.js index cbe9d3de3..403056b96 100644 --- a/src/_base/selection/src/styles/themed-base.js +++ b/src/_base/selection/src/styles/themed-base.js @@ -9,10 +9,14 @@ import { createKey, insideFormItem } from '../../../../_utils/cssr' +import { formatLength } from '../../../../_utils' export default c([ ({ props }) => { - const { $local } = props + const { + $local, + $global: { cubicBezierEaseInOut } + } = props const { borderRadius, color, @@ -32,7 +36,6 @@ export default c([ borderHover, borderActive } = $local - const { cubicBezierEaseInOut } = props.$global return cTB( 'base-selection', { @@ -48,6 +51,42 @@ export default c([ borderRadius }, [ + ['small', 'medium', 'large'].map((size) => { + const { + [createKey('height', size)]: height, + [createKey('fontSize', size)]: fontSize + } = $local + return cM( + size + '-size', + { + minHeight: height, + lineHeight: height, + fontSize + }, + [ + cE('placeholder', { + height, + lineHeight: height + }), + cB('base-selection-label', { + height, + lineHeight: height + }), + cB( + 'base-selection-tags', + { + minHeight: height + }, + [ + cB('base-selection-input-tag', { + height: formatLength(height, { c: 1, offset: -6 }), + lineHeight: formatLength(height, { c: 1, offset: -6 }) + }) + ] + ) + ] + ) + }), cM('bordered', [ cE('border', { border diff --git a/src/_base/selection/src/styles/themed-size.js b/src/_base/selection/src/styles/themed-size.js deleted file mode 100644 index 3697f6a41..000000000 --- a/src/_base/selection/src/styles/themed-size.js +++ /dev/null @@ -1,45 +0,0 @@ -import { cTB, c, cB, cE, cM, createKey } from '../../../../_utils/cssr' -import { formatLength } from '../../../../_utils' - -export default c([ - ({ props }) => { - const { - $vm: { size }, - $local - } = props - const height = $local[createKey('height', size)] - const fontSize = $local[createKey('fontSize', size)] - return cTB('base-selection', [ - cM( - size + '-size', - { - minHeight: height, - lineHeight: height, - fontSize - }, - [ - cE('placeholder', { - height, - lineHeight: height - }), - cB('base-selection-label', { - height, - lineHeight: height - }), - cB( - 'base-selection-tags', - { - minHeight: height - }, - [ - cB('base-selection-input-tag', { - height: formatLength(height, { c: 1, offset: -6 }), - lineHeight: formatLength(height, { c: 1, offset: -6 }) - }) - ] - ) - ] - ) - ]) - } -])