Skip to content
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

Jump to bottom

feat(selector): refactor selector #336

Merged
merged 1 commit into from
Nov 14, 2022
Merged

feat(selector): refactor selector #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 9 additions & 12 deletions demo/pages/Selector/index.acss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
.btns,
.valusBox {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 24rpx;
background-color: #fff;
page {
padding: 12px;
}
.btns .amd-button {
flex: 1;
margin: 0 12rpx;

page .amd-container {
margin-bottom: 12px;
}
.valusBox {
flex-wrap: wrap;

.valueBox {
margin-top: 24rpx;
}

105 changes: 60 additions & 45 deletions demo/pages/Selector/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,68 @@
<selector
title="单选"
value="11"
items="{{items1}}"/>

<selector
title="单选"
value="2"
desc="选项带有副标题"
items="{{items2}}"/>

<selector
title="多选"
value="{{['1','2']}}"
items="{{items1}}"
multiple="{{true}}"/>

<selector
title="全禁用"
value="{{['1','2']}}"
items="{{items1}}"
disabled="{{true}}"
multiple="{{true}}"/>

<selector
title="部分禁用"
value="{{['1','2']}}"
items="{{items3}}"
multiple="{{true}}"/>

<selector
title="更改值"
value="{{value}}"
items="{{items1}}"
data-value="value"
onChange="handleChange"/>

<view class="valusBox">
<container title="单选">
<selector
value="11"
items="{{items1}}"
/>
</container>

<container title="单选-选项带有副标题">
<selector
value="2"
items="{{items2}}"
/>

</container>

<container title="多选">
<selector
value="{{['1','2']}}"
items="{{items1}}"
multiple="{{true}}"
/>
</container>

<container title="全禁用">
<selector
value="{{['1','2']}}"
items="{{items1}}"
disabled="{{true}}"
multiple="{{true}}"
/>
</container>

<container title="部分禁用">
<selector
value="{{['1','2']}}"
items="{{items3}}"
multiple="{{true}}"
/>
</container>

<container title="更改值">
<selector
value="{{value}}"
items="{{items1}}"
data-value="value"
onChange="handleChange"
/>
<button
class="valueBox"
type="danger-ghost"
inline="{{true}}"
inlineSize="larger"
onTap="handleChangeValue"
data-value="11">
改变选中值为： 3
</button>
</view>
<selector
title="单选-不允许清空"
value="11"
minSelectedCount="{{1}}"
onSelectMin="onSelectMin"
items="{{items1}}"/>
</container>

<container title="单选-不允许清空">
<selector
value="11"
minSelectedCount="{{1}}"
onSelectMin="onSelectMin"
items="{{items1}}"
/>
</container>


39 changes: 6 additions & 33 deletions demo/pages/Selector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,14 @@ Page({
{ text: '选项三', value: '11' },
],
items2: [
{ text: '选项一', subText: '副标题一', value: '1' },
{ text: '选项二', subText: '副标题二', value: '2' },
{ text: '选项三', subText: '副标题三', value: '3' },
{ text: '选项一', subText: '描述文案一', value: '1' },
{ text: '选项二', subText: '描述文案二', value: '2' },
{ text: '选项三', subText: '描述文案三', value: '3' },
],
items3: [
{ text: '选项一', subText: '副标题一', value: '1' },
{ text: '选项二', subText: '副标题二', value: '2', disabled: true },
{ text: '选项三', subText: '副标题三', value: '3' },
],
items: [
{
text: '选项一',
value: '1',
},
{
text: '选项二',
subText: '描述文案 2',
value: '2',
},
{
text: '选项三',
disabled: true,
value: '3',
},
{
text: '选项四',
subText: '描述文案 4',
disabled: true,
value: '4',
},
{
text: '选项五',
subText: '描述文案 5',
value: '5',
},
{ text: '选项一', subText: '描述文案一', value: '1' },
{ text: '选项二', subText: '描述文案二', value: '2', disabled: true },
{ text: '选项三', subText: '描述文案三', value: '3' },
],
value: '1',
},
Expand Down
3 changes: 2 additions & 1 deletion demo/pages/Selector/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"usingComponents": {
"selector": "../../../src/Selector/index",
"button": "../../../src/Button/index",
"demo-block": "../../components/DemoBlock/index"
"demo-block": "../../components/DemoBlock/index",
"container": "../../../src/Container/index"
}
}
45 changes: 16 additions & 29 deletions src/Selector/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,21 @@
<import-sjs from="./index.sjs" name="selector" />
<view class="amd-selector {{className ? className : ''}} {{disabled ? 'amd-selector-disabled' : ''}}">
<view class="amd-selector-header-container" >
<view
a:if="{{title}}"
class="amd-selector-header-title">
{{title}}
<text class="amd-selector-header-title-tip">
{{ title ? multiple ? '(多选)' : '(单选)' : ''}}
</text>
</view>
<view
a:if="{{desc}}"
class="amd-selector-header-desc">
{{desc}}

<view class="amd-selector {{className ? className : ''}} {{disabled ? 'amd-selector-disabled' : ''}}" style="{{style}}">
<view class="amd-selector-content-container">
<view a:for="{{items}}" class="amd-selector-content {{items.length <= 2 ? 'amd-selector-content-item2' : ''}}">
<view
class="amd-selector-item {{item.disabled ? 'amd-selector-item-disabled' : ''}} {{selector.getIsCurItemSelected(cValue, multiple, item.value) ? `amd-selector-item-active ${activeItemClassName ? activeItemClassName: ''}` :''}}"
style="{{selector.getIsCurItemSelected(cValue, multiple, item.value) ? activeItemStyle : ''}}"
data-value="{{item.value}}"
data-disabled="{{item.disabled}}"
onTap="onChange">
<view class="amd-selector-item-text"
a:if="{{item.text}}">{{item.text}}</view>
<view class="amd-selector-item-subtext"
a:if="{{item.subText}}">{{item.subText}}</view>
<view class="amd-selector-item-badge-active"
a:if="{{selector.getIsCurItemSelected(cValue, multiple, item.value)}}" />
</view>
</view>
<view class="amd-selector-content-container">
<view a:for="{{items}}" class="amd-selector-content {{items.length <= 2 ? 'amd-selector-content-item2' : ''}}">
<view
class="amd-selector-item {{item.disabled ? 'amd-selector-item-disabled' : ''}} {{selector.getIsCurItemSelected(cValue, multiple, item.value) ? 'amd-selector-item-active' :''}}"
data-value="{{item.value}}"
data-disabled="{{item.disabled}}"
onTap="onChange">
<view class="amd-selector-item-text"
a:if="{{item.text}}">{{item.text}}</view>
<view class="amd-selector-item-subtext"
a:if="{{item.subText}}">{{item.subText}}</view>
<view class="amd-selector-item-badge-active"
a:if="{{selector.getIsCurItemSelected(cValue, multiple, item.value)}}" />
</view>
</view>
</view>
</view>
34 changes: 13 additions & 21 deletions src/Selector/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,56 +6,42 @@
position: relative;
display: flex;
flex-direction: column;
padding: calc(@selector-collapse / 2);
// padding: calc(@selector-collapse / 2);
background-color: @selector-background-color;
line-height: @selector-line-height;
&-header {
&-container {
display: flex;
justify-content: space-between;
padding: 0 12 * @rpx;
}

&-title {
font-size: 30 * @rpx;
&-tip {
font-size: 26 * @rpx;
color: #999;
padding-left: 8 * @rpx;
}
}
&-desc {
font-size: 30 * @rpx;
color: #999;
}
}

&-disabled .amd-selector-content {
opacity: 0.6;

.@{selectorPrefix}-item-disabled {
opacity: 1;
}
}

&-content {
display: flex;
flex: 0 33.3333%;
padding: calc(@selector-collapse / 2);
box-sizing: border-box;
z-index: 2;

&-item2 {
flex: 1;
}

&-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

.amd-tap-modal-mask {
width: calc(100% - 24 * @rpx);
height: calc(100% - 24 * @rpx);
margin: 12 * @rpx 0 0 12 * @rpx;
}
}

&-item {
position: relative;
display: flex;
Expand All @@ -70,15 +56,21 @@

&-active {
background-color: @selector-item-active-background;

.@{selectorPrefix}-item-text {
color: @COLOR_BRAND1;
}
}

&-disabled {
opacity: 0.6;
}

&-text {
font-size: @selector-item-size;
color: @selector-item-color;
}

&-subtext {
font-size: @selector-item-sub-size;
color: @selector-item-sub-color;
Expand Down
Loading