From 9da6be7afd6373faab146d1474a772ba11617016 Mon Sep 17 00:00:00 2001 From: DiamondYuan Date: Thu, 18 Jan 2024 19:14:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20check=20list=20=E9=80=82=E9=85=8D?= =?UTF-8?q?=E5=BE=AE=E4=BF=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../alipay/demo/pages/Checklist/index.axml | 33 ++-- compiled/alipay/demo/pages/Checklist/index.js | 149 +++++++++--------- .../Checklist/{index.acss => index.less} | 0 compiled/wechat/app.json | 1 + compiled/wechat/demo/pages/Checklist/index.js | 75 +++++++++ .../wechat/demo/pages/Checklist/index.json | 8 + .../wechat/demo/pages/Checklist/index.wxml | 39 +++++ .../wechat/demo/pages/Checklist/index.wxss | 7 + .../src/Checklist/ChecklistItem/index.js | 11 ++ .../src/Checklist/ChecklistItem/index.json | 6 + .../src/Checklist/ChecklistItem/index.wxml | 21 +++ .../src/Checklist/ChecklistItem/index.wxss | 67 ++++++++ .../src/Checklist/ChecklistItem/props.js | 4 + compiled/wechat/src/Checklist/index.js | 62 ++++++++ compiled/wechat/src/Checklist/index.json | 7 + compiled/wechat/src/Checklist/index.md | 45 ++++++ compiled/wechat/src/Checklist/index.wxml | 45 ++++++ compiled/wechat/src/Checklist/index.wxs | 9 ++ compiled/wechat/src/Checklist/index.wxss | 8 + compiled/wechat/src/Checklist/props.js | 10 ++ compiled/wechat/src/Checklist/variable.wxss | 0 config/wechat.json | 4 +- demo/pages/Checklist/index.axml | 56 ------- demo/pages/Checklist/index.axml.tsx | 83 ++++++++++ .../Checklist/{index.acss => index.less} | 0 demo/pages/Checklist/{index.js => index.ts} | 6 + src/Checklist/ChecklistItem/index.axml.tsx | 4 - 27 files changed, 608 insertions(+), 152 deletions(-) rename compiled/alipay/demo/pages/Checklist/{index.acss => index.less} (100%) create mode 100644 compiled/wechat/demo/pages/Checklist/index.js create mode 100644 compiled/wechat/demo/pages/Checklist/index.json create mode 100644 compiled/wechat/demo/pages/Checklist/index.wxml create mode 100644 compiled/wechat/demo/pages/Checklist/index.wxss create mode 100644 compiled/wechat/src/Checklist/ChecklistItem/index.js create mode 100644 compiled/wechat/src/Checklist/ChecklistItem/index.json create mode 100644 compiled/wechat/src/Checklist/ChecklistItem/index.wxml create mode 100644 compiled/wechat/src/Checklist/ChecklistItem/index.wxss create mode 100644 compiled/wechat/src/Checklist/ChecklistItem/props.js create mode 100644 compiled/wechat/src/Checklist/index.js create mode 100644 compiled/wechat/src/Checklist/index.json create mode 100644 compiled/wechat/src/Checklist/index.md create mode 100644 compiled/wechat/src/Checklist/index.wxml create mode 100644 compiled/wechat/src/Checklist/index.wxs create mode 100644 compiled/wechat/src/Checklist/index.wxss create mode 100644 compiled/wechat/src/Checklist/props.js create mode 100644 compiled/wechat/src/Checklist/variable.wxss delete mode 100644 demo/pages/Checklist/index.axml create mode 100644 demo/pages/Checklist/index.axml.tsx rename demo/pages/Checklist/{index.acss => index.less} (100%) rename demo/pages/Checklist/{index.js => index.ts} (93%) diff --git a/compiled/alipay/demo/pages/Checklist/index.axml b/compiled/alipay/demo/pages/Checklist/index.axml index 579b5778c..a67bb1b9c 100644 --- a/compiled/alipay/demo/pages/Checklist/index.axml +++ b/compiled/alipay/demo/pages/Checklist/index.axml @@ -1,56 +1,59 @@ + + + + className="demo-checklist-checked-icon" /> - title: {{props.item.title}} + title: {{ item.title }} diff --git a/compiled/alipay/demo/pages/Checklist/index.js b/compiled/alipay/demo/pages/Checklist/index.js index f77eb2398..01e7c6d37 100644 --- a/compiled/alipay/demo/pages/Checklist/index.js +++ b/compiled/alipay/demo/pages/Checklist/index.js @@ -1,78 +1,75 @@ Page({ - data: { - value: [1, 2], - options_1: [ - { - value: 1, - title: '可勾选列表项1', - }, - { - value: 2, - title: '可勾选列表项2', - }, - { - value: 3, - title: '可勾选列表项3', - }, - ], - options_2: [ - { - value: 1, - image: - 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', - description: '这里是描述信息', - title: '可勾选列表项1', - }, - { - value: 2, - image: - 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', - description: '这里是描述信息', - title: '可勾选列表项2', - }, - { - value: 3, - image: - 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', - description: '这里是描述信息', - title: '可勾选列表项3', - }, - ], - options_3: [ - { - value: 1, - title: '可勾选列表项1', - }, - { - value: 2, - title: '禁用列表项2', - disabled: true, - }, - { - value: 3, - title: '可勾选列表项3', - }, - ], - options_4: [ - { - value: 1, - title: '可勾选列表项1', - }, - { - value: 2, - title: '只读列表项2', - readonly: true, - }, - { - value: 3, - title: '可勾选列表项3', - }, - ], - }, - onChange(v, items, e) { - console.log('当前选中的值为：', v, items, e); - }, - onChangeControlled(value) { - this.setData({ value }); - }, + data: { + value: [1, 2], + options_1: [ + { + value: 1, + title: '可勾选列表项1', + }, + { + value: 2, + title: '可勾选列表项2', + }, + { + value: 3, + title: '可勾选列表项3', + }, + ], + options_2: [ + { + value: 1, + image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', + description: '这里是描述信息', + title: '可勾选列表项1', + }, + { + value: 2, + image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', + description: '这里是描述信息', + title: '可勾选列表项2', + }, + { + value: 3, + image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', + description: '这里是描述信息', + title: '可勾选列表项3', + }, + ], + options_3: [ + { + value: 1, + title: '可勾选列表项1', + }, + { + value: 2, + title: '禁用列表项2', + disabled: true, + }, + { + value: 3, + title: '可勾选列表项3', + }, + ], + options_4: [ + { + value: 1, + title: '可勾选列表项1', + }, + { + value: 2, + title: '只读列表项2', + readonly: true, + }, + { + value: 3, + title: '可勾选列表项3', + }, + ], + }, + onChange(v, items, e) { + console.log('当前选中的值为：', v, items, e); + }, + onChangeControlled(value) { + this.setData({ value }); + }, }); diff --git a/compiled/alipay/demo/pages/Checklist/index.acss b/compiled/alipay/demo/pages/Checklist/index.less similarity index 100% rename from compiled/alipay/demo/pages/Checklist/index.acss rename to compiled/alipay/demo/pages/Checklist/index.less diff --git a/compiled/wechat/app.json b/compiled/wechat/app.json index 2ce08fee1..18957ed63 100644 --- a/compiled/wechat/app.json +++ b/compiled/wechat/app.json @@ -1,5 +1,6 @@ { "pages": [ + "demo/pages/Checklist/index", "demo/pages/Modal/index", "demo/pages/GuideTour/index", "demo/pages/Skeleton/index", diff --git a/compiled/wechat/demo/pages/Checklist/index.js b/compiled/wechat/demo/pages/Checklist/index.js new file mode 100644 index 000000000..09f7afb24 --- /dev/null +++ b/compiled/wechat/demo/pages/Checklist/index.js @@ -0,0 +1,75 @@ +Page({ + data: { + value: [1, 2], + options_1: [ + { + value: 1, + title: '可勾选列表项1', + }, + { + value: 2, + title: '可勾选列表项2', + }, + { + value: 3, + title: '可勾选列表项3', + }, + ], + options_2: [ + { + value: 1, + image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', + description: '这里是描述信息', + title: '可勾选列表项1', + }, + { + value: 2, + image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', + description: '这里是描述信息', + title: '可勾选列表项2', + }, + { + value: 3, + image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', + description: '这里是描述信息', + title: '可勾选列表项3', + }, + ], + options_3: [ + { + value: 1, + title: '可勾选列表项1', + }, + { + value: 2, + title: '禁用列表项2', + disabled: true, + }, + { + value: 3, + title: '可勾选列表项3', + }, + ], + options_4: [ + { + value: 1, + title: '可勾选列表项1', + }, + { + value: 2, + title: '只读列表项2', + readonly: true, + }, + { + value: 3, + title: '可勾选列表项3', + }, + ], + }, + onChange: function (v, items, e) { + console.log('当前选中的值为：', v, items, e); + }, + onChangeControlled: function (value) { + this.setData({ value: value.detail[0] }); + }, +}); diff --git a/compiled/wechat/demo/pages/Checklist/index.json b/compiled/wechat/demo/pages/Checklist/index.json new file mode 100644 index 000000000..c7d1d61b6 --- /dev/null +++ b/compiled/wechat/demo/pages/Checklist/index.json @@ -0,0 +1,8 @@ +{ + "defaultTitle": "Checklist", + "usingComponents": { + "checklist": "../../../src/Checklist/index", + "icon": "../../../src/Icon/index", + "container": "../../../src/Container/index" + } +} diff --git a/compiled/wechat/demo/pages/Checklist/index.wxml b/compiled/wechat/demo/pages/Checklist/index.wxml new file mode 100644 index 000000000..8f05f220a --- /dev/null +++ b/compiled/wechat/demo/pages/Checklist/index.wxml @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + diff --git a/compiled/wechat/demo/pages/Checklist/index.wxss b/compiled/wechat/demo/pages/Checklist/index.wxss new file mode 100644 index 000000000..6a67e0cbb --- /dev/null +++ b/compiled/wechat/demo/pages/Checklist/index.wxss @@ -0,0 +1,7 @@ +.demo-checklist-label { + font-size: 32rpx; + padding: 36rpx 0 16rpx 16rpx; +} +.demo-checklist-checked-icon { + font-size: 36rpx; +} diff --git a/compiled/wechat/src/Checklist/ChecklistItem/index.js b/compiled/wechat/src/Checklist/ChecklistItem/index.js new file mode 100644 index 000000000..e9dc19dce --- /dev/null +++ b/compiled/wechat/src/Checklist/ChecklistItem/index.js @@ -0,0 +1,11 @@ +import { useEvent } from 'functional-mini/component'; +import { mountComponent } from '../../_util/component'; +import { useComponentEvent } from '../../_util/hooks/useComponentEvent'; +import { ChecklistItemDefaultProps } from './props'; +var CheckListItem = function (props) { + var triggerEvent = useComponentEvent(props).triggerEvent; + useEvent('onChecklistItemClick', function () { + triggerEvent('change', props.item); + }); +}; +mountComponent(CheckListItem, ChecklistItemDefaultProps); diff --git a/compiled/wechat/src/Checklist/ChecklistItem/index.json b/compiled/wechat/src/Checklist/ChecklistItem/index.json new file mode 100644 index 000000000..3a037cbf8 --- /dev/null +++ b/compiled/wechat/src/Checklist/ChecklistItem/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "icon": "../../Icon/index" + } +} diff --git a/compiled/wechat/src/Checklist/ChecklistItem/index.wxml b/compiled/wechat/src/Checklist/ChecklistItem/index.wxml new file mode 100644 index 000000000..58ecfa559 --- /dev/null +++ b/compiled/wechat/src/Checklist/ChecklistItem/index.wxml @@ -0,0 +1,21 @@ + + + + + + + + + + + diff --git a/compiled/wechat/src/Checklist/ChecklistItem/index.wxss b/compiled/wechat/src/Checklist/ChecklistItem/index.wxss new file mode 100644 index 000000000..9046ac445 --- /dev/null +++ b/compiled/wechat/src/Checklist/ChecklistItem/index.wxss @@ -0,0 +1,67 @@ +.ant-checklist-item { + background-color: #ffffff; +} +.ant-checklist-item-hover { + background-color: #eeeeee; +} +.ant-checklist-item-content { + display: flex; + align-items: center; + padding: 12px 12px; + color: #333333; +} +.ant-checklist-item-content-disabled { + opacity: 0.4; +} +.ant-checklist-item-content-box { + flex: 1; +} +.ant-checklist-item-content-box-nut { + display: flex; + align-items: center; +} +.ant-checklist-item-image { + width: 36px; + height: 36px; + border-radius: 4px; +} +.ant-checklist-item-text { + flex: 1; + margin-left: 12px; +} +.ant-checklist-item-text-no-image { + margin-left: 0; +} +.ant-checklist-item-text-title { + color: #333333; + font-size: 17px; + line-height: 24px; +} +.ant-checklist-item-text-description { + font-size: 13px; + color: #999999; + margin-top: 1px; + line-height: 18px; +} +.ant-checklist-item-checked-disabled { + opacity: 0.4; +} +.ant-checklist-item:last-child .ant-checklist-item-line { + display: none; +} +.ant-checklist-item-line { + margin-left: 12px; + position: relative; +} +.ant-checklist-item-line::after { + content: ''; + position: absolute; + background-color: #eeeeee; + display: block; + top: auto; + right: 0; + bottom: 0; + left: 0; + height: 1px; + transform: scaleY(0.5); +} diff --git a/compiled/wechat/src/Checklist/ChecklistItem/props.js b/compiled/wechat/src/Checklist/ChecklistItem/props.js new file mode 100644 index 000000000..13c2ffe73 --- /dev/null +++ b/compiled/wechat/src/Checklist/ChecklistItem/props.js @@ -0,0 +1,4 @@ +export var ChecklistItemDefaultProps = { + item: null, + checked: false, +}; diff --git a/compiled/wechat/src/Checklist/index.js b/compiled/wechat/src/Checklist/index.js new file mode 100644 index 000000000..5684ae543 --- /dev/null +++ b/compiled/wechat/src/Checklist/index.js @@ -0,0 +1,62 @@ +var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) { + if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { + if (ar || !(i in from)) { + if (!ar) ar = Array.prototype.slice.call(from, 0, i); + ar[i] = from[i]; + } + } + return to.concat(ar || Array.prototype.slice.call(from)); +}; +import { mountComponent } from '../_util/component'; +import { useComponentEvent } from '../_util/hooks/useComponentEvent'; +import { useHandleCustomEvent } from '../_util/hooks/useHandleCustomEvent'; +import { useMixState } from '../_util/hooks/useMixState'; +import { ChecklistFunctionalProps, } from './props'; +var Checkbox = function (props) { + var _a = useMixState(props.defaultValue, { + value: props.value, + postState: function (val) { + var value = val || []; + return { + valid: true, + value: value, + }; + }, + }), state = _a[0], _b = _a[1], isControlled = _b.isControlled, update = _b.update; + var triggerEventValues = useComponentEvent(props).triggerEventValues; + useHandleCustomEvent('onChange', function (item) { + var multiple = props.multiple, options = props.options; + var value = item.value; + if (multiple) { + var currentValue_1 = state; + if (currentValue_1.indexOf(value) > -1) { + currentValue_1 = currentValue_1.filter(function (v) { return v !== value; }); + } + else { + currentValue_1 = __spreadArray(__spreadArray([], currentValue_1, true), [value], false); + } + if (!isControlled) { + update(currentValue_1); + } + triggerEventValues('change', [ + currentValue_1, + options.filter(function (v) { return currentValue_1.indexOf(v.value) > -1; }), + ]); + } + else { + if (!isControlled) { + update(value); + } + triggerEventValues('change', [ + value, + options.find(function (v) { return v.value === value; }), + ]); + } + }); + return { + mixin: { + value: state, + }, + }; +}; +mountComponent(Checkbox, ChecklistFunctionalProps); diff --git a/compiled/wechat/src/Checklist/index.json b/compiled/wechat/src/Checklist/index.json new file mode 100644 index 000000000..402e290e9 --- /dev/null +++ b/compiled/wechat/src/Checklist/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "ant-checklist-item": "./ChecklistItem/index", + "ant-icon": "../Icon/index" + } +} diff --git a/compiled/wechat/src/Checklist/index.md b/compiled/wechat/src/Checklist/index.md new file mode 100644 index 000000000..6b0bbca9b --- /dev/null +++ b/compiled/wechat/src/Checklist/index.md @@ -0,0 +1,45 @@ +--- +nav: + path: /components +group: + title: 信息输入 + order: 10 +toc: 'content' +--- +# Checklist 可勾选列表 + + + +列表的勾选操作 +## 何时使用 +- 在一组列表项中选择一个或多个 +- 可勾选列表的使用需要默认至少勾选一项，方便用户了解列表是可以勾选的 + +## 代码示例 + + +## API +| 属性 | 说明 | 类型 | 默认值 | +| -----|-----|-----|-----| +| className | 类名| string | - | +| content | CheckListItem自定义内容区作用域插槽，接收item参数 | slot | - | +| defaultValue | 默认选中数据 | string \| number \| (string \| number)[] | - | +| icon | 自定义选中Icon插槽 | slot | - | +| multiple | 是否支持多选 | boolean | false | +| options | 配置每一列的选项 | [ChecklistItem](#checklistitem)[] | [] | +| style | 样式| string | - | +| value | 选中数据 | string \| number \| (string \| number)[] | - | +| onChange | 选中项发生变化，触发回调 | (value: string \| number \| (string \| number)[], column: [ChecklistItem](#checklistitem) \| [ChecklistItem](#checklistitem)[], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | + +### ChecklistItem + +| 参数 | 说明 | 类型 | 默认值 | +| -----|-----|-----|-----| +| description | 描述 | string | - | +| disabled | 是否禁用 | boolean | false | +| image | 图片 | string | - | +| readonly | 是否只读 | boolean | false | +| title | 标题 | string | - | +| value | 值 | string | - | + + diff --git a/compiled/wechat/src/Checklist/index.wxml b/compiled/wechat/src/Checklist/index.wxml new file mode 100644 index 000000000..d3a8b7cbf --- /dev/null +++ b/compiled/wechat/src/Checklist/index.wxml @@ -0,0 +1,45 @@ + + + + + + + + + + + {{ item.title }} + + + {{ item.description }} + + + + + + + + + + diff --git a/compiled/wechat/src/Checklist/index.wxs b/compiled/wechat/src/Checklist/index.wxs new file mode 100644 index 000000000..983f852de --- /dev/null +++ b/compiled/wechat/src/Checklist/index.wxs @@ -0,0 +1,9 @@ +function getChecked(value, values, multiple) { + if (!multiple) { + return value === values; + } + return (values || []).indexOf(value) > -1; +} +module.exports = { + getChecked: getChecked +}; \ No newline at end of file diff --git a/compiled/wechat/src/Checklist/index.wxss b/compiled/wechat/src/Checklist/index.wxss new file mode 100644 index 000000000..2f000f4b5 --- /dev/null +++ b/compiled/wechat/src/Checklist/index.wxss @@ -0,0 +1,8 @@ +.ant-checklist-body { + position: relative; + overflow: hidden; +} +.ant-checklist-item-check-icon { + font-size: 18px; + color: #1677ff; +} diff --git a/compiled/wechat/src/Checklist/props.js b/compiled/wechat/src/Checklist/props.js new file mode 100644 index 000000000..edb0ea72e --- /dev/null +++ b/compiled/wechat/src/Checklist/props.js @@ -0,0 +1,10 @@ +export var ChecklistDefaultProps = { + multiple: false, + options: [], +}; +export var ChecklistFunctionalProps = { + value: null, + defaultValue: null, + multiple: false, + options: [], +}; diff --git a/compiled/wechat/src/Checklist/variable.wxss b/compiled/wechat/src/Checklist/variable.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/config/wechat.json b/config/wechat.json index 83a02d8e5..223b5d964 100644 --- a/config/wechat.json +++ b/config/wechat.json @@ -1,5 +1,6 @@ { "pages": [ + "pages/Checklist", "pages/Modal", "pages/GuideTour", "pages/Divider", @@ -86,6 +87,7 @@ "Avatar", "Skeleton", "GuideTour", - "Modal" + "Modal", + "Checklist" ] } diff --git a/demo/pages/Checklist/index.axml b/demo/pages/Checklist/index.axml deleted file mode 100644 index 579b5778c..000000000 --- a/demo/pages/Checklist/index.axml +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - title: {{props.item.title}} - - - diff --git a/demo/pages/Checklist/index.axml.tsx b/demo/pages/Checklist/index.axml.tsx new file mode 100644 index 000000000..2a64403cb --- /dev/null +++ b/demo/pages/Checklist/index.axml.tsx @@ -0,0 +1,83 @@ +import { Page, InternalData, View } from 'tsxml'; +import Checklist from '../../../src/Checklist/index.axml'; +import Icon from '../../../src/Icon/index.axml'; +import Container from '../../../src/Container/index.axml'; + +export default ({ + defaultValue, + options_1, + options_2, + options_3, + options_4, + value, + item, +}: InternalData) => ( + + + + + + + + + + + + + + + + + + + + + + {/* #if ALIPAY */} + + + + + + + title: {item.title} + + + + {/* #endif */} + +); diff --git a/demo/pages/Checklist/index.acss b/demo/pages/Checklist/index.less similarity index 100% rename from demo/pages/Checklist/index.acss rename to demo/pages/Checklist/index.less diff --git a/demo/pages/Checklist/index.js b/demo/pages/Checklist/index.ts similarity index 93% rename from demo/pages/Checklist/index.js rename to demo/pages/Checklist/index.ts index f77eb2398..3f7c1d890 100644 --- a/demo/pages/Checklist/index.js +++ b/demo/pages/Checklist/index.ts @@ -73,6 +73,12 @@ Page({ console.log('当前选中的值为：', v, items, e); }, onChangeControlled(value) { + /// #if ALIPAY this.setData({ value }); + /// #endif + + /// #if WECHAT + this.setData({ value: value.detail[0] }); + /// #endif }, }); diff --git a/src/Checklist/ChecklistItem/index.axml.tsx b/src/Checklist/ChecklistItem/index.axml.tsx index b04868247..abfeaa79b 100644 --- a/src/Checklist/ChecklistItem/index.axml.tsx +++ b/src/Checklist/ChecklistItem/index.axml.tsx @@ -18,15 +18,11 @@ export default ({ item, checked }: TSXMLProps) => ( }`} > - {/* #if ALIPAY */} - {/* #endif */} {checked && ( - {/* #if ALIPAY */} - {/* #endif */} )}