From e01cf9869e23832b44989c35a32aa52a697a58bc Mon Sep 17 00:00:00 2001 From: Charles Lee Date: Sun, 28 Apr 2019 17:54:47 +0800 Subject: [PATCH] Update Typescript definitions and font size (#1057) * fix: form props * fix: missing form props * fix: form definitions * fix: update font size --- packages/zent/assets/alert.scss | 3 +- packages/zent/assets/avatar.scss | 8 +++-- packages/zent/assets/block-header.scss | 7 ++-- packages/zent/assets/breadcrumb.scss | 5 +-- packages/zent/assets/card.scss | 7 ++-- packages/zent/assets/cascader.scss | 9 ++--- packages/zent/assets/colorpicker.scss | 3 +- .../zent/assets/date-range-quick-picker.scss | 3 +- packages/zent/assets/error-boundary.scss | 3 +- packages/zent/assets/form.scss | 19 ++++++----- packages/zent/assets/grid.scss | 5 +-- packages/zent/assets/input.scss | 3 +- packages/zent/assets/mixins/_popup.scss | 3 +- packages/zent/assets/notify.scss | 3 +- packages/zent/assets/pagination.scss | 1 + packages/zent/assets/preview-image.scss | 5 +-- packages/zent/assets/progress.scss | 2 +- packages/zent/assets/rate.scss | 3 +- packages/zent/assets/search-input.scss | 4 ++- packages/zent/assets/select.scss | 13 +++---- packages/zent/assets/slider.scss | 5 +-- packages/zent/assets/steps.scss | 14 ++++---- packages/zent/assets/table.scss | 34 +++---------------- packages/zent/assets/tabs.scss | 12 ++++--- packages/zent/assets/tag.scss | 1 + packages/zent/assets/timeline.scss | 5 +-- packages/zent/assets/tree.scss | 7 ++-- packages/zent/assets/upload.scss | 13 +++---- packages/zent/package.json | 1 - packages/zent/src/form/Field.tsx | 5 ++- packages/zent/src/form/FormContext.tsx | 4 +-- packages/zent/src/form/createForm.tsx | 6 ++-- .../form-components/FormComponentField.tsx | 1 + packages/zent/src/form/getControlGroup.tsx | 1 + 34 files changed, 113 insertions(+), 105 deletions(-) diff --git a/packages/zent/assets/alert.scss b/packages/zent/assets/alert.scss index 14accf7245..0eda1eb243 100644 --- a/packages/zent/assets/alert.scss +++ b/packages/zent/assets/alert.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; @mixin vertical-center { position: absolute; @@ -19,7 +20,7 @@ $close-icon-size: 14px; .zent-alert { box-sizing: border-box; width: 100%; - font-size: 12px; + font-size: $font-size-normal; line-height: 12px; position: relative; diff --git a/packages/zent/assets/avatar.scss b/packages/zent/assets/avatar.scss index 993be5e3ea..2ffbaf7668 100644 --- a/packages/zent/assets/avatar.scss +++ b/packages/zent/assets/avatar.scss @@ -1,4 +1,6 @@ @import './theme/default'; +@import './theme/font'; + $avatar-size-small: 24px; $avatar-size-default: 32px; $avatar-size-large: 40px; @@ -11,7 +13,7 @@ $avatar-size-large: 40px; cursor: default; overflow: hidden; position: relative; - font-size: 16px; + font-size: $font-size-large; &--size-default { width: $avatar-size-default; @@ -49,7 +51,7 @@ $avatar-size-large: 40px; } &.zent-avatar--size-small { - font-size: 14px; + font-size: $font-size-normal; } &.zent-avatar--size-large { @@ -62,7 +64,7 @@ $avatar-size-large: 40px; font-size: 18px; &.zent-avatar--size-small { - font-size: 14px; + font-size: $font-size-normal; } &.zent-avatar--size-large { diff --git a/packages/zent/assets/block-header.scss b/packages/zent/assets/block-header.scss index 8819b4fad0..892acb6a58 100644 --- a/packages/zent/assets/block-header.scss +++ b/packages/zent/assets/block-header.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; .zent-block-header { position: relative; @@ -26,7 +27,7 @@ margin: 0; padding-left: 5px; font-weight: normal; - font-size: 14px; + font-size: $font-size-normal; } } @@ -42,7 +43,7 @@ &__pop { display: inline-block; color: $theme-stroke-4; - font-size: 16px; + font-size: $font-size-large; } &__tooltip { @@ -52,7 +53,7 @@ &-trigger { color: $theme-stroke-5; margin-left: 10px; - font-size: 14px; + font-size: $font-size-normal; cursor: pointer; } } diff --git a/packages/zent/assets/breadcrumb.scss b/packages/zent/assets/breadcrumb.scss index 3ffc6b7814..f3e16b49cc 100644 --- a/packages/zent/assets/breadcrumb.scss +++ b/packages/zent/assets/breadcrumb.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; .zent-breadcrumb { color: $theme-stroke-3; @@ -8,7 +9,7 @@ span, a { - font-size: 14px; + font-size: $font-size-normal; line-height: 1em; display: inline-block; vertical-align: middle; @@ -53,7 +54,7 @@ min-width: 0; border: 0; background: transparent; - font-size: 14px; + font-size: $font-size-normal; color: $theme-stroke-3; text-align: center; box-sizing: border-box; diff --git a/packages/zent/assets/card.scss b/packages/zent/assets/card.scss index e272702cc2..e66606e2ab 100644 --- a/packages/zent/assets/card.scss +++ b/packages/zent/assets/card.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; .zent-card { background-color: $theme-stroke-9; @@ -36,17 +37,17 @@ &--normal { .zent-card-header { - font-size: 16px; + font-size: $font-size-large; } .zent-card-body { - font-size: 14px; + font-size: $font-size-normal; } } &--nested { .zent-card-header { - font-size: 14px; + font-size: $font-size-normal; background: $theme-stroke-8; } } diff --git a/packages/zent/assets/cascader.scss b/packages/zent/assets/cascader.scss index 5b769d6a75..fba2e274c2 100644 --- a/packages/zent/assets/cascader.scss +++ b/packages/zent/assets/cascader.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; $c-border: $theme-stroke-4; $c-blue: $theme-primary-1; @@ -45,7 +46,7 @@ $c-blue-hover: $theme-primary-6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - font-size: 12px; + font-size: $font-size-normal; &-content { line-height: inherit; @@ -61,7 +62,7 @@ $c-blue-hover: $theme-primary-6; right: 10px; top: 50%; transition: transform 0.25s; - font-size: 12px; + font-size: $font-size-normal; transform: scale(0.5); } } @@ -79,7 +80,7 @@ $c-blue-hover: $theme-primary-6; overflow: auto; &-item { - font-size: 12px; + font-size: $font-size-normal; cursor: pointer; white-space: nowrap; transition: all 0.3s; @@ -143,7 +144,7 @@ $c-blue-hover: $theme-primary-6; &-link { cursor: pointer; display: inline-block; - font-size: 12px; + font-size: $font-size-normal; padding: 0 5px; line-height: 18px; vertical-align: middle; diff --git a/packages/zent/assets/colorpicker.scss b/packages/zent/assets/colorpicker.scss index f70eca0146..cc82e46a69 100644 --- a/packages/zent/assets/colorpicker.scss +++ b/packages/zent/assets/colorpicker.scss @@ -1,4 +1,6 @@ @import './theme/default'; +@import './theme/font'; + $c-border: $theme-stroke-5; $c-blue: $theme-primary-2; $c-light-blue: $theme-primary-4; @@ -10,7 +12,6 @@ $c-light-blue: $theme-primary-4; .zent-color-picker { cursor: pointer; display: inline-block; - font-size: 12px; margin-right: 10px; outline: none; position: relative; diff --git a/packages/zent/assets/date-range-quick-picker.scss b/packages/zent/assets/date-range-quick-picker.scss index 8fab73419f..fa26d41c9f 100644 --- a/packages/zent/assets/date-range-quick-picker.scss +++ b/packages/zent/assets/date-range-quick-picker.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; .zent-date-range-picker__filter { display: inline-block; @@ -8,7 +9,7 @@ margin-left: 10px; display: inline-block; padding: 2px 4px; - font-size: 12px; + font-size: $font-size-normal; color: $theme-stroke-4; cursor: pointer; box-sizing: border-box; diff --git a/packages/zent/assets/error-boundary.scss b/packages/zent/assets/error-boundary.scss index f46123553b..134521a227 100644 --- a/packages/zent/assets/error-boundary.scss +++ b/packages/zent/assets/error-boundary.scss @@ -1,9 +1,10 @@ @import './theme/default'; +@import './theme/font'; .zent-error-boundary-fallback-component { &__error { color: $theme-error-2; - font-size: 14px; + font-size: $font-size-normal; .zenticon-error-circle { margin-right: 5px; diff --git a/packages/zent/assets/form.scss b/packages/zent/assets/form.scss index 46022a64fd..f85115721a 100644 --- a/packages/zent/assets/form.scss +++ b/packages/zent/assets/form.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; .zent-form { margin-bottom: 30px; @@ -22,7 +23,7 @@ margin-bottom: 20px; width: 100%; border-bottom: 1px solid $theme-stroke-6; - font-size: 14px; + font-size: $font-size-normal; font-weight: bold; } @@ -39,7 +40,7 @@ .zent-form__static-value { padding-top: 5px; - font-size: 14px; + font-size: $font-size-normal; line-height: 18px; padding-bottom: 5px; word-break: break-all; @@ -48,13 +49,13 @@ .zent-form__control-action { padding-top: 5px; display: inline-block; - font-size: 14px; + font-size: $font-size-normal; line-height: 18px; } .zent-form__required { margin-right: 6px; - font-size: 16px; + font-size: $font-size-large; color: $theme-error-1; vertical-align: middle; } @@ -64,13 +65,13 @@ .zent-form__help-desc, .zent-form__notice-desc { line-height: 14px; - font-size: 12px; + font-size: $font-size-small; margin-top: 10px; margin-bottom: 0; color: $theme-stroke-3; ul li { - font-size: 12px; + font-size: $font-size-small; line-height: 12px; } @@ -94,7 +95,7 @@ .zent-form__control-label { display: inline-block; width: 120px; - font-size: 12px; + font-size: $font-size-normal; line-height: 30px; text-align: right; vertical-align: top; @@ -139,7 +140,7 @@ .zent-form__control-label { display: inline-block; - font-size: 12px; + font-size: $font-size-normal; vertical-align: top; & + .zent-form__controls { @@ -153,7 +154,7 @@ .zent-form--vertical { .zent-form__control-label { display: block; - font-size: 12px; + font-size: $font-size-normal; margin-bottom: 10px; } } diff --git a/packages/zent/assets/grid.scss b/packages/zent/assets/grid.scss index 19136bf2e1..7397eecfb2 100644 --- a/packages/zent/assets/grid.scss +++ b/packages/zent/assets/grid.scss @@ -1,10 +1,11 @@ @import './theme/default'; +@import './theme/font'; $thead-background-color: $theme-stroke-7; $border-color: $theme-stroke-6; .zent-grid { - font-size: 12px; + font-size: $font-size-normal; color: $theme-stroke-1; position: relative; line-height: 1.5; @@ -236,7 +237,7 @@ $border-color: $theme-stroke-6; &-th, &-td { - font-size: 14px; + font-size: $font-size-normal; display: table-cell; box-sizing: border-box; box-shadow: inset 0 -1px 0 0 $theme-stroke-6; diff --git a/packages/zent/assets/input.scss b/packages/zent/assets/input.scss index accc276150..88f4b291b1 100644 --- a/packages/zent/assets/input.scss +++ b/packages/zent/assets/input.scss @@ -1,5 +1,6 @@ @import './theme/default'; @import './theme/font'; + $defaultBorderColor: $theme-stroke-5; $errorBorderColor: $theme-error-4; $borderRadius: 2px; @@ -68,7 +69,7 @@ $large-size: 40px; color: $theme-stroke-5; &-close-circle { - font-size: 12px; + font-size: $font-size-small; right: 10px; cursor: pointer; padding: 4px 0; diff --git a/packages/zent/assets/mixins/_popup.scss b/packages/zent/assets/mixins/_popup.scss index 893d184d79..b5f76ac260 100644 --- a/packages/zent/assets/mixins/_popup.scss +++ b/packages/zent/assets/mixins/_popup.scss @@ -1,4 +1,5 @@ @import '../theme/default'; +@import '../theme/font'; @mixin popup { box-shadow: $shadow-spec-layer; @@ -11,5 +12,5 @@ background-color: $theme-stroke-9; max-height: 224px; border-radius: 3px; - font-size: 12px; + font-size: $font-size-normal; } diff --git a/packages/zent/assets/notify.scss b/packages/zent/assets/notify.scss index dd81768a5a..c7dc6ff616 100644 --- a/packages/zent/assets/notify.scss +++ b/packages/zent/assets/notify.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; .zent-notify-container { z-index: 10000; @@ -18,7 +19,7 @@ line-height: 40px; max-height: 200px; overflow-y: auto; - font-size: 14px; + font-size: $font-size-normal; color: $theme-stroke-9; text-align: center; border-radius: 2px; diff --git a/packages/zent/assets/pagination.scss b/packages/zent/assets/pagination.scss index 18a2fb2a38..4ccb68a487 100644 --- a/packages/zent/assets/pagination.scss +++ b/packages/zent/assets/pagination.scss @@ -3,6 +3,7 @@ .zent-pagination { display: flex; + font-size: $font-size-normal; &-page-list--normal, &-page-list--mini, diff --git a/packages/zent/assets/preview-image.scss b/packages/zent/assets/preview-image.scss index d8b4a4c327..baafc97c85 100644 --- a/packages/zent/assets/preview-image.scss +++ b/packages/zent/assets/preview-image.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; $graycolor: $theme-stroke-3; $rgbamaskbgcolor: rgba(black, 0.6); @@ -60,7 +61,7 @@ $rgbamaskbgcolor: rgba(black, 0.6); line-height: 40px; color: $theme-stroke-1; z-index: 2; - font-size: 16px; + font-size: $font-size-large; &.image-p-footer-paging { min-width: 216px; @@ -79,7 +80,7 @@ $rgbamaskbgcolor: rgba(black, 0.6); cursor: pointer; padding: 0 30px; user-select: none; - font-size: 16px; + font-size: $font-size-large; min-width: 65px; text-align: center; diff --git a/packages/zent/assets/progress.scss b/packages/zent/assets/progress.scss index 736c724911..f70fffb5df 100644 --- a/packages/zent/assets/progress.scss +++ b/packages/zent/assets/progress.scss @@ -108,7 +108,7 @@ $mask-opacity: 0.2; .zent-progress-info { display: inline-block; - font-size: 12px; + font-size: $font-size-small; color: $color-info; position: absolute; top: 0; diff --git a/packages/zent/assets/rate.scss b/packages/zent/assets/rate.scss index c51e8a1b1f..3f455fc4f2 100644 --- a/packages/zent/assets/rate.scss +++ b/packages/zent/assets/rate.scss @@ -1,10 +1,11 @@ @import './theme/default'; +@import './theme/font'; .zent-rate { color: $rate-star-color; display: inline-block; outline: none; - font-size: 16px; + font-size: $font-size-large; &-star { display: inline-block; diff --git a/packages/zent/assets/search-input.scss b/packages/zent/assets/search-input.scss index 2fa25a3c69..514612edca 100644 --- a/packages/zent/assets/search-input.scss +++ b/packages/zent/assets/search-input.scss @@ -1,3 +1,5 @@ +@import './theme/font'; + .zent-search-input { position: relative; @@ -8,7 +10,7 @@ transform: translate(0, -50%); &-search { - font-size: 12px; + font-size: $font-size-normal; left: 10px; } } diff --git a/packages/zent/assets/select.scss b/packages/zent/assets/select.scss index 2ec6ce16d1..f987bfc4ef 100644 --- a/packages/zent/assets/select.scss +++ b/packages/zent/assets/select.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; @import './mixins/index'; .zent-select { @@ -34,7 +35,8 @@ .zent-select-popup, .zent-select-input, .zent-select-tags { - font-size: 12px; + font-size: $font-size-normal; + line-height: 18px; } &__popover { @@ -115,14 +117,12 @@ white-space: nowrap; overflow: hidden; padding: 6px 25px; - padding-left: 16px; + padding-left: 12px; } .zent-select-tags { - padding: 3px 5px; - padding-right: 25px; + padding: 4px 25px 4px 12px; max-height: none; - line-height: 24px; // sass-lint:disable no-vendor-prefixes &::-webkit-scrollbar { @@ -132,7 +132,7 @@ &.tags__empty { padding: 6px 25px; - padding-left: 16px; + padding-left: 12px; line-height: 18px; } @@ -151,6 +151,7 @@ padding: 0 4px; padding-right: 18px; line-height: 16px; + font-size: $font-size-small; position: relative; } diff --git a/packages/zent/assets/slider.scss b/packages/zent/assets/slider.scss index a75a26c4bc..def2ffb125 100644 --- a/packages/zent/assets/slider.scss +++ b/packages/zent/assets/slider.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; .zent-slider { display: flex; @@ -114,7 +115,7 @@ padding: 4px 5px; background-color: $theme-stroke-1; border-radius: 2px; - font-size: 12px; + font-size: $font-size-normal; color: $theme-stroke-9; line-height: 11px; position: relative; @@ -163,7 +164,7 @@ &-marks { position: absolute; width: 100%; - font-size: 12px; + font-size: $font-size-normal; margin-top: 4px; color: $theme-stroke-1; diff --git a/packages/zent/assets/steps.scss b/packages/zent/assets/steps.scss index 5213fffa27..88544a9499 100644 --- a/packages/zent/assets/steps.scss +++ b/packages/zent/assets/steps.scss @@ -1,4 +1,6 @@ @import './theme/default'; +@import './theme/font'; + $cart-color: $theme-stroke-1; $wait-color: $theme-stroke-4; $error-color: $theme-error-2; @@ -63,7 +65,7 @@ $icon-color: $theme-stroke-4; text-align: center; .zent-step-title { - font-size: 14px; + font-size: $font-size-normal; max-width: 160px; line-height: 14px; margin-top: 10px; @@ -73,7 +75,7 @@ $icon-color: $theme-stroke-4; .zent-step-description { max-width: 160px; - font-size: 12px; + font-size: $font-size-small; line-height: 16px; margin-top: 8px; word-wrap: break-word; @@ -98,7 +100,7 @@ $icon-color: $theme-stroke-4; text-align: center; background: $icon-color; color: $theme-stroke-9; - font-size: 14px; + font-size: $font-size-normal; } .zenticon { @@ -315,7 +317,7 @@ $icon-color: $theme-stroke-4; .zent-steps-step { height: 50px; line-height: 50px; - font-size: 14px; + font-size: $font-size-normal; background: $bg-color; color: $cart-color; text-align: center; @@ -380,7 +382,7 @@ $icon-color: $theme-stroke-4; .zent-steps-step { height: 48px; line-height: 48px; - font-size: 14px; + font-size: $font-size-normal; background: $bg-color; color: $cart-color; text-align: center; @@ -487,7 +489,7 @@ $icon-color: $theme-stroke-4; .zent-steps-step { height: 46px; line-height: 46px; - font-size: 14px; + font-size: $font-size-normal; text-align: center; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/zent/assets/table.scss b/packages/zent/assets/table.scss index 298b3bbeb1..242a2356af 100644 --- a/packages/zent/assets/table.scss +++ b/packages/zent/assets/table.scss @@ -1,8 +1,7 @@ @import './theme/default'; +@import './theme/font'; $blue: $theme-primary-2; -$darkblue: $theme-primary-1; -$orange: $theme-error-3; .zent-table-container { margin-bottom: 20px; @@ -50,7 +49,7 @@ $orange: $theme-error-3; background: $theme-stroke-7; .cell { - font-size: 14px; + font-size: $font-size-normal; font-weight: 500; } } @@ -163,7 +162,7 @@ $orange: $theme-error-3; .cell { min-height: 56px; - font-size: 14px; + font-size: $font-size-normal; } } @@ -209,7 +208,7 @@ $orange: $theme-error-3; min-height: 56px; align-items: center; text-align: left; - font-size: 12px; + font-size: $font-size-normal; &__child-container { overflow: hidden; @@ -292,31 +291,6 @@ $orange: $theme-error-3; } } - .card__thumb { - float: left; - margin-right: 5px; - height: 50px; - } - - .card__title { - display: block; - height: 32px; - line-height: 1.4; - overflow: hidden; - text-overflow: ellipsis; - font-size: 12px; - color: $blue; - - &:hover { - text-decoration: none; - } - } - - .card__info { - font-size: 12px; - color: $orange; - } - .clearfix:after { content: ''; display: table; diff --git a/packages/zent/assets/tabs.scss b/packages/zent/assets/tabs.scss index 7857d1410e..6cb2e6ccdb 100644 --- a/packages/zent/assets/tabs.scss +++ b/packages/zent/assets/tabs.scss @@ -1,4 +1,6 @@ @import './theme/default'; +@import './theme/font'; + $activecolor: $theme-stroke-1; $color: $theme-stroke-2; $tabbg: $theme-stroke-8; @@ -7,7 +9,7 @@ $disablecolor: $theme-stroke-4; $slidercolor: $theme-primary-3; .zent-tabs { - font-size: 14px; + font-size: $font-size-normal; line-height: 1.42857143; &-nav { @@ -91,14 +93,14 @@ $slidercolor: $theme-primary-3; min-width: 90px; position: relative; box-sizing: border-box; - font-size: 12px; + font-size: $font-size-normal; &-del { line-height: 1; position: absolute; top: 3px; right: 3px; - font-size: 12px; + font-size: $font-size-small; display: none; } } @@ -156,7 +158,7 @@ $slidercolor: $theme-primary-3; .zent-tabs-tab-inner { padding: 14px 40px; - font-size: 14px; + font-size: $font-size-normal; } .zent-tabs-actived { @@ -239,7 +241,7 @@ $slidercolor: $theme-primary-3; .zent-tabs-nav-ink-bar { position: absolute; display: block; - bottom: 0; + bottom: 2px; height: 2px; background-color: $slidercolor; width: 0; diff --git a/packages/zent/assets/tag.scss b/packages/zent/assets/tag.scss index 8f05c34ddf..b1ee79a645 100644 --- a/packages/zent/assets/tag.scss +++ b/packages/zent/assets/tag.scss @@ -1,5 +1,6 @@ @import './theme/default'; @import './theme/font'; + $color-red: $theme-error-2; $color-green: $theme-success-2; $color-yellow: $theme-warn-1; diff --git a/packages/zent/assets/timeline.scss b/packages/zent/assets/timeline.scss index 6522637f91..5a454b7b0b 100644 --- a/packages/zent/assets/timeline.scss +++ b/packages/zent/assets/timeline.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; .zent-timeline { padding: 10px 0; @@ -42,7 +43,7 @@ &-label { vertical-align: middle; - font-size: 12px; + font-size: $font-size-small; margin-left: 5px; } } @@ -170,5 +171,5 @@ color: white; border-radius: 5px; z-index: 5000; - font-size: 12px; + font-size: $font-size-small; } diff --git a/packages/zent/assets/tree.scss b/packages/zent/assets/tree.scss index 821319ee2c..a5a2e57179 100644 --- a/packages/zent/assets/tree.scss +++ b/packages/zent/assets/tree.scss @@ -1,8 +1,9 @@ @import './theme/default'; +@import './theme/font'; .zent-tree { color: $theme-stroke-1; - font-size: 14px; + font-size: $font-size-normal; ul, li { @@ -54,7 +55,7 @@ } .zent-tree.zent-tree-large { - font-size: 16px; + font-size: $font-size-large; .zent-tree-bar { .switcher { @@ -69,7 +70,7 @@ } .zent-tree.zent-tree-small { - font-size: 12px; + font-size: $font-size-small; .zent-tree-bar { .switcher { diff --git a/packages/zent/assets/upload.scss b/packages/zent/assets/upload.scss index 0a883f3628..25f954b79c 100644 --- a/packages/zent/assets/upload.scss +++ b/packages/zent/assets/upload.scss @@ -1,4 +1,5 @@ @import './theme/default'; +@import './theme/font'; @mixin ellipsis { text-overflow: ellipsis; @@ -61,7 +62,7 @@ .zent-upload-title { float: left; - font-size: 14px; + font-size: $font-size-normal; font-weight: bold; text-align: right; width: 100px; @@ -124,7 +125,7 @@ .zent-upload-local-tips { clear: both; padding-top: 20px; - font-size: 12px; + font-size: $font-size-small; } .zent-upload__upload-local-image-list { @@ -161,7 +162,7 @@ color: $theme-stroke-9; text-align: center; line-height: 80px; - font-size: 14px; + font-size: $font-size-normal; } } } @@ -246,7 +247,7 @@ color: $theme-stroke-9; text-align: center; line-height: 60px; - font-size: 14px; + font-size: $font-size-normal; } &__size { @@ -271,7 +272,7 @@ right: -8px; width: 18px; height: 18px; - font-size: 14px; + font-size: $font-size-normal; line-height: 16px; border-radius: 9px; @@ -344,7 +345,7 @@ .zent-upload-tips { line-height: 14px; - font-size: 12px; + font-size: $font-size-small; margin-top: 6px; margin-bottom: 0; color: $theme-stroke-2; diff --git a/packages/zent/package.json b/packages/zent/package.json index 002ce528a5..a5bb22a6b5 100644 --- a/packages/zent/package.json +++ b/packages/zent/package.json @@ -19,7 +19,6 @@ "theme": "./scripts/build-theme.sh", "new-component": "node ./scripts/new-component.js" }, - "typings": "typings/index.d.ts", "author": "Youzan FE", "license": "MIT", "files": [ diff --git a/packages/zent/src/form/Field.tsx b/packages/zent/src/form/Field.tsx index 9dd10d35fe..585e01db1a 100644 --- a/packages/zent/src/form/Field.tsx +++ b/packages/zent/src/form/Field.tsx @@ -19,7 +19,7 @@ export interface IFieldProps { ref?: (ref: any) => void; name: string; component: React.ElementType; - value: any; + value?: any; normalize?: ( value: any, previousValue: any, @@ -54,6 +54,9 @@ export interface IFieldProps { displayError?: boolean; clearErrorOnFocus?: boolean; relatedFields?: string[]; + + // Pass any other props to component + [key: string]: any; } export interface IFieldState { diff --git a/packages/zent/src/form/FormContext.tsx b/packages/zent/src/form/FormContext.tsx index 0f1b42ab72..a3d280e4a0 100644 --- a/packages/zent/src/form/FormContext.tsx +++ b/packages/zent/src/form/FormContext.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; export interface IFormContext { - zentForm: { - [key: string]: any; - }; + zentForm: Record; } const FormContext = React.createContext({ zentForm: {} }); diff --git a/packages/zent/src/form/createForm.tsx b/packages/zent/src/form/createForm.tsx index 6019e932a7..4621127bee 100644 --- a/packages/zent/src/form/createForm.tsx +++ b/packages/zent/src/form/createForm.tsx @@ -54,9 +54,11 @@ export interface IFormCreateFormWrapperProps { onChange?: (values?: object, isChanged?: boolean) => void; validationErrors?: { [key: string]: string }; scrollToError?: boolean; + + [key: string]: any; } -export interface IFormCreateFormWrapperProps { +export interface IFormCreateFormWrapperState { isFormValid: boolean; isSubmitting: boolean; submitFail: boolean; @@ -78,7 +80,7 @@ const createForm = ( return WrappedForm => { return class Form extends Component< IFormCreateFormWrapperProps, - IFormCreateFormWrapperProps + IFormCreateFormWrapperState > { fields: any[]; fieldArrays: any[]; diff --git a/packages/zent/src/form/form-components/FormComponentField.tsx b/packages/zent/src/form/form-components/FormComponentField.tsx index 43e287103a..00efa4fd8a 100644 --- a/packages/zent/src/form/form-components/FormComponentField.tsx +++ b/packages/zent/src/form/form-components/FormComponentField.tsx @@ -22,6 +22,7 @@ import Field from '../Field'; export interface IFormComponentFieldCommonProps { name: string; + [key: string]: any; } export class FormCheckboxField extends Component< diff --git a/packages/zent/src/form/getControlGroup.tsx b/packages/zent/src/form/getControlGroup.tsx index 5df62fd514..ce8391a025 100644 --- a/packages/zent/src/form/getControlGroup.tsx +++ b/packages/zent/src/form/getControlGroup.tsx @@ -14,6 +14,7 @@ export interface IFormControlGroupProps { isDirty: boolean; error: string; isActive: boolean; + [key: string]: any; } export default (Control: React.ElementType) => {