Skip to content

fix(TextArea&Skeleton): 增加disabled样式,调整autosize demo,删除无用样式 #2684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oasis-cloud merged 5 commits into from
Nov 1, 2024
Merged

fix(TextArea&Skeleton): 增加disabled样式,调整autosize demo,删除无用样式 #2684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
934611e
feat: tag icon
xiaoyatong Oct 31, 2024
0e34d43
fix(TextArea): 增加disabled样式,调整autosize demo,删除无用样式
xiaoyatong Oct 31, 2024
3c66eb1
fix(TextArea): 增加disabled样式,调整autosize demo,删除无用样式
xiaoyatong Oct 31, 2024
d6121cb
fix: 修改cr和 skeleton
xiaoyatong Nov 1, 2024
084bc99
Merge branch 'V3.0' into fix-textarea-harmony
xiaoyatong Nov 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/packages/skeleton/demos/taro/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ const Demo5 = () => {
}
/>
<View className="nut-skeleton-content-line">
<Text className="nut-skeleton-content-title">NutUI-React</Text>
<View className="description">
<Text>NutUI-React</Text>
<View style={{ marginTop: '10px', width: '70%' }}>
一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
</View>
</View>
Expand Down
158 changes: 90 additions & 68 deletions src/packages/skeleton/skeleton.harmony.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,8 @@
.nut-avatar-group {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
position: relative;
flex: 0 0 auto;
}
.nut-avatar-group .nut-avatar {
border: 1px solid #fff;
}
.nut-avatar-group .nut-avatar:not(:first-of-type) {
margin-left: -8px;
}

[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
margin-left: 0;
margin-right: -8px;
}

.nut-image {
display: block;
position: relative;
}
.nut-image .nut-img {
.nut-image-default {
display: block;
width: 100%;
height: 100%;
Expand All @@ -32,7 +11,7 @@
border-radius: 50%;
overflow: hidden;
}
.nut-image .nut-img-loading {
.nut-image-loading {
width: 100%;
height: 100%;
position: absolute;
Expand All @@ -45,7 +24,7 @@
background: #f5f6fa;
background-size: 100% 100%;
}
.nut-image .nut-img-error {
.nut-image-error {
width: 100%;
height: 100%;
position: absolute;
Expand All @@ -70,81 +49,124 @@
right: 0;
}

.nut-avatar-group {
display: flex;
flex-direction: row;
flex: 0 0 auto;
}
.nut-avatar-group-avatar,
.nut-avatar-group .nut-avatar {
border: 1px solid #fff;
margin-left: -8px;
}
.nut-avatar-group-avatar:not(:first-of-type),
.nut-avatar-group .nut-avatar:not(:first-of-type) {
margin-left: -8px;
}

[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
margin-left: 0;
margin-right: -8px;
}

.nut-avatar {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
position: relative;
flex: 0 0 auto;
text-align: center;
}
.nut-avatar .avatar-img {
position: absolute;
.nut-avatar-round {
border-radius: 999px;
overflow: hidden;
}
.nut-avatar-square {
border-radius: 5px;
}
.nut-avatar-first-child {
margin-left: 0;
margin-right: 0;
}
Comment on lines +84 to +87
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

优化选择器，减少不必要的类名

.nut-avatar-first-child类可以使用:first-child伪类替代，降低HTML结构的复杂度。

建议修改为：

.nut-avatar-group .nut-avatar:first-child {
  margin-left: 0;
  margin-right: 0;
}

.nut-avatar-img {
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
flex-shrink: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.nut-avatar .icon {
.nut-avatar-icon {
background-size: 100% 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nut-avatar .nut-icon-img {
width: 100%;
height: 100%;
}
.nut-avatar .text {
display: inline-block;
.nut-avatar-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}

[dir=rtl] .nut-avatar .avatar-img,
.nut-rtl .nut-avatar .avatar-img {
left: auto;
right: 50%;
transform: translate(50%, -50%);
.nut-avatar-large {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
Comment on lines +110 to 115
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

精简重复的样式

.nut-avatar-large、.nut-avatar-normal和.nut-avatar-small都有相同的display和布局属性，可以提取为公共类，减少代码冗余。

建议提取公共样式：

.nut-avatar-common {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nut-avatar-large,
.nut-avatar-normal,
.nut-avatar-small {
  @extend .nut-avatar-common; /* 如果使用预处理器 */
  /* 保留各自的尺寸属性 */
}

Also applies to: 138-143, 153-159

}
[dir=rtl] .nut-avatar .icon,
.nut-rtl .nut-avatar .icon {
left: auto;
right: 50%;
transform: translate(50%, -50%);
.nut-avatar-large-img {
width: 60px;
height: 60px;
}

.nut-avatar-large {
.nut-avatar-large-img-image {
width: 60px;
height: 60px;
}
.nut-avatar-large-icon {
width: 60px;
height: 60px;
}
.nut-avatar-large .nut-icon-img {
width: 100%;
height: 100%;
}
.nut-avatar-large-text {
width: 60px;
height: 60px;
line-height: 60px;
}

.nut-avatar-small {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
}
.nut-avatar-small-img-image {
width: 32px;
height: 32px;
}
.nut-avatar-small-text {
width: 32px;
height: 32px;
line-height: 32px;
}

.nut-avatar-normal {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
line-height: 40px;
}

.nut-avatar-round {
border-radius: 50%;
overflow: hidden;
.nut-avatar-normal-img-image {
width: 40px;
height: 40px;
}

.nut-avatar-square {
border-radius: 5px;
.nut-avatar-normal .nut-icon-img {
width: 100%;
height: 100%;
}
.nut-avatar-normal-text {
width: 40px;
height: 40px;
}

.nut-skeleton {
Expand Down
2 changes: 1 addition & 1 deletion src/packages/textarea/demos/h5/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ import React from 'react'
import { TextArea } from '@nutui/nutui-react'

const Demo4 = () => {
return <TextArea rows={1} autoSize />
return <TextArea autoSize maxLength={-1} />
}
export default Demo4
2 changes: 1 addition & 1 deletion src/packages/textarea/demos/taro/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ import React from 'react'
import { TextArea } from '@nutui/nutui-react-taro'

const Demo4 = () => {
return <TextArea rows={1} autoSize />
return <TextArea autoSize maxLength={-1} />
}
export default Demo4
18 changes: 9 additions & 9 deletions src/packages/textarea/textarea.harmony.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
min-width: 0;
margin: 0;
padding: 0;
Expand All @@ -37,26 +36,27 @@
resize: none;
}
.nut-textarea-textarea .taro-textarea {
color: #1a1a1a;
background-color: transparent;
resize: none;
}
.nut-textarea-textarea-disabled {
cursor: not-allowed;
color: #c2c4cc;
}
.nut-textarea .cpoyText {
position: absolute;
top: -999999px;
left: -999999px;
.nut-textarea-textarea-disabled::placeholder {
color: #c2c4cc;
}
.nut-textarea-textarea-disabled .taro-textarea {
color: #c2c4cc;
}
.nut-textarea-textarea-disabled .taro-textarea::placeholder {
color: #c2c4cc;
}
.nut-textarea.nut-textarea-rtl-limit {
right: auto;
left: 15px;
}
.nut-textarea.nut-textarea-rtl .cpoyText {
left: auto;
right: -999999px;
}

.taro-textarea {
background-color: transparent;
Expand Down
21 changes: 10 additions & 11 deletions src/packages/textarea/textarea.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
min-width: 0;
margin: 0;
padding: 0;
Expand All @@ -38,31 +37,31 @@
resize: none;

.taro-textarea {
color: $textarea-text-color;
background-color: transparent;
resize: none;
}

&-disabled {
cursor: not-allowed;
color: $textarea-disabled-color;
&::placeholder {
color: $textarea-disabled-color;
}
.taro-textarea {
color: $textarea-disabled-color;
&::placeholder {
color: $textarea-disabled-color;
}
}
}
}
.cpoyText {
position: absolute;
top: -999999px;
left: -999999px;
}

&.nut-textarea-rtl {
&-limit {
right: auto;
left: 15px;
}

.cpoyText {
left: auto;
right: -999999px;
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/packages/textarea/textarea.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,8 @@ export const TextArea: FunctionComponent<Partial<TextAreaProps>> = (props) => {
className={`${classPrefix}-textarea ${disabled ? `${classPrefix}-textarea-disabled` : ''}`}
style={Taro.getEnv() === 'WEB' ? undefined : style}
disabled={Taro.getEnv() === 'WEB' ? disabled : disabled || readOnly}
value={inputValue}
// @ts-ignore
value={inputValue}
onInput={(e: any) => handleChange(e)}
onBlur={(e: any) => handleBlur(e)}
onFocus={(e: any) => handleFocus(e)}
Expand Down