@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
59 lines • 1.89 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/* eslint-disable */
import react from 'react';
import { View, Text } from '@tarojs/components';
import { WaterfallFlow, Button } from '@antmjs/vantui';
import * as COMMON from './common';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export default function Demo() {
var genTextData = COMMON.genTextData;
var _react$useState = react.useState(3),
_react$useState2 = _slicedToArray(_react$useState, 2),
columnNum = _react$useState2[0],
setColumnNum = _react$useState2[1];
var _react$useState3 = react.useState(genTextData('daymic_')),
_react$useState4 = _slicedToArray(_react$useState3, 1),
list = _react$useState4[0];
var renderItem = function renderItem(item) {
return /*#__PURE__*/_jsx(View, {
style: {
background: '#EEE'
},
children: /*#__PURE__*/_jsx(Text, {
children: item.content
})
});
};
var handleAddColumn = react.useCallback(function () {
if (columnNum < 5) {
setColumnNum(columnNum + 1);
}
}, [columnNum]);
var handleMinusColumn = react.useCallback(function () {
if (columnNum > 2) {
setColumnNum(columnNum - 1);
}
}, [columnNum]);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(WaterfallFlow, {
dataSource: list,
columnNum: columnNum,
gutter: 4,
renderItem: renderItem
}), /*#__PURE__*/_jsxs(View, {
style: {
display: 'flex',
marginTop: '16px'
},
children: [/*#__PURE__*/_jsx(Button, {
onClick: handleAddColumn,
children: "\u52A0\u4E00\u5217"
}), /*#__PURE__*/_jsx(Button, {
onClick: handleMinusColumn,
children: "\u51CF\u4E00\u5217"
})]
})]
});
}