diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..e5f2118 --- /dev/null +++ b/.npmignore @@ -0,0 +1,13 @@ +src/ +node_modules/ +.babelrc +webpack.config.js +.gitignore +log4js.json +tsconfig.json +tslint.json +.npmignore +.npmrc +.yarnrc +logs/ + diff --git a/.yarnrc b/.yarnrc new file mode 100644 index 0000000..f46410e --- /dev/null +++ b/.yarnrc @@ -0,0 +1,2 @@ +--registry "https://registry.npm.taobao.org" +--no-lockfile true diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..2f935bf --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,180 @@ +const gulp = require('gulp'); +const webpack = require("webpack"); +const ws = require('webpack-stream'); +const autoprefixer = require("autoprefixer"); +const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const pkg = require("./package.json"); + +gulp.task('build:wheel-picker', (cb) => { + const dest = './dist/'; + console.log(cb) + const banner = ` WheelPicker v${pkg.version} + ${pkg.homepage} + Licensed under the ${pkg.license} License`; + return gulp.src(['./src/WheelPicker.js']) + .pipe(ws({ + entry: { + wheelpicker: "./src/WheelPicker.js" + }, + output: { + path: __dirname + "/dist", + filename: "[name].min.js", + library: "WheelPicker", + libraryTarget: "umd" + }, + module: { + loaders: [{ + test: /\.scss$/, + loader: ExtractTextPlugin.extract(["css", "sass-loader!postcss-loader"]) + }] + }, + plugins: [ + new webpack.optimize.UglifyJsPlugin({ minimize: true }), + new ExtractTextPlugin("[name].min.css"), + new webpack.BannerPlugin(banner, { entryOnly: true }) + ], + postcss: function () { + return [autoprefixer]; + } + }, webpack)) + .on('error', (e) => { + cb(e); + }) + .pipe(gulp.dest(dest)); +}); + +gulp.task('build:wheel', (cb) => { + const dest = './dist/'; + const banner = ` Wheel v${pkg.version} + ${pkg.homepage} + Licensed under the ${pkg.license} License`; + return gulp.src(['./src/Wheel.js']) + .pipe(ws({ + entry: { + wheel: "./src/Wheel.js" + }, + output: { + path: __dirname + "/dist", + filename: "[name].min.js", + library: "Wheel", + libraryTarget: "umd" + }, + module: { + loaders: [{ + test: /\.scss$/, + loader: ExtractTextPlugin.extract(["css", "sass-loader!postcss-loader"]) + }] + }, + plugins: [ + new webpack.optimize.UglifyJsPlugin({ minimize: true }), + new ExtractTextPlugin("[name].min.css"), + new webpack.BannerPlugin(banner, { entryOnly: true }) + ], + postcss: function () { + return [autoprefixer]; + } + }, webpack)) + .on('error', (e) => { + cb(e); + }) + .pipe(gulp.dest(dest)); +}); + +gulp.task('watch:wheel-picker', async (cb) => { + await sleep(10000); + const dest = './dist/'; + console.log(cb) + const banner = ` WheelPicker v${pkg.version} + ${pkg.homepage} + Licensed under the ${pkg.license} License`; + return gulp.src(['./src/WheelPicker.js']) + .pipe(ws({ + watch: true, + watchOptions: { + aggregateTimeout: 300, + poll: 1000, + ignored: /node_modules/ + }, + mode: 'none', + entry: { + wheelpicker: "./src/WheelPicker.js" + }, + output: { + path: __dirname + "/dist", + filename: "[name].min.js", + library: "WheelPicker", + libraryTarget: "umd" + }, + module: { + loaders: [{ + test: /\.scss$/, + loader: ExtractTextPlugin.extract(["css", "sass-loader!postcss-loader"]) + }] + }, + plugins: [ + new ExtractTextPlugin("[name].min.css"), + new webpack.BannerPlugin(banner, { entryOnly: true }) + ], + postcss: function () { + return [autoprefixer]; + } + }, webpack)) + .on('error', (e) => { + cb(e); + }) + .pipe(gulp.dest(dest)); +}); + +gulp.task('watch:wheel', async (cb) => { + await sleep(10000); + const dest = './dist/'; + const banner = ` Wheel v${pkg.version} + ${pkg.homepage} + Licensed under the ${pkg.license} License`; + return gulp.src(['./src/Wheel.js']) + .pipe(ws({ + watch: true, + watchOptions: { + aggregateTimeout: 300, + poll: 1000, + ignored: /node_modules/ + }, + mode: 'none', + entry: { + wheel: "./src/Wheel.js" + }, + output: { + path: __dirname + "/dist", + filename: "[name].min.js", + library: "Wheel", + libraryTarget: "umd" + }, + module: { + loaders: [{ + test: /\.scss$/, + loader: ExtractTextPlugin.extract(["css", "sass-loader!postcss-loader"]) + }] + }, + plugins: [ + new ExtractTextPlugin("[name].min.css"), + new webpack.BannerPlugin(banner, { entryOnly: true }) + ], + postcss: function () { + return [autoprefixer]; + } + }, webpack)) + .on('error', (e) => { + cb(e); + }) + .pipe(gulp.dest(dest)); +}); + +function sleep(timeout) { + return new Promise((resolve) => { + setTimeout(resolve, timeout); + }) +} + +gulp.task('watch', gulp.parallel('watch:wheel', 'watch:wheel-picker')); + +gulp.task('default', gulp.parallel('build:wheel', 'build:wheel-picker')); diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..a5aaec0 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,134 @@ +interface Item { + text?: string; + value?: string; +} + +type IData = Item | string; + +interface IWheelOptions { + /** + * 每列的数据组成的数组 + */ + data: IData[]; + /** + * 每列的默认值组成的数组 + */ + value?: string; + /** + * 可见的行数（奇数） + */ + rows?: number; + /** + * 行高 + */ + rowHeight?: number; + /** + * 选择改变时触发，参数为选中数据 + */ + onSelect?: (selectedItems: IData) => void; +} + +export class Wheel { + constructor(container: HTMLHtmlElement, options: IWheelOptions); +} + +type TOmit = 'onSelect' | 'data' + +interface IWheelPickerOptions extends Omit { + /** + * 标题 + */ + title: string; + /** + * 选择器对应的 input 元素 + */ + el: HTMLInputElement; + /** + * 将 el.type 设置为 hidden 并用于保存 value 值；再 clone 一个 el 元素用于显示 text 值 + */ + hiddenInput?: boolean; + /** + * 点击遮罩层关闭组件（相当于点击取消按钮） + */ + hideOnBackdrop?: boolean; + /** + * 每列的数据组成的数组 + */ + data: IData[][]; + /** + * 从 el 元素获取默认值 + */ + formatValue?: (val: string) => void; + /** + * 保存时填充到 el 或 cloneNode 的值 + */ + parseValue?: (val: string) => void; + /** + * 保存时填充到 el 的值（如果 hiddenInput 为 true） + */ + parseHiddenValue?: (val: string) => void; + /** + * 生成组件 DOM 时触发，参数为组件元素 + */ + onRender?: (container: HTMLDivElement) => void; + /** + * 显示组件时触发 + */ + onShow?: () => void; + /** + * 滚动导致值变化时触发，参数为发生变化的列的索引值和选中项 + */ + onChange?: (index: number, selectedItem: IData) => void; + /** + * 点击确定时触发，参数为条目数组 + */ + onSelect?: (selectedItems: IData[]) => void; + /** + * 点击取消时触发 + */ + onCancel?: () => void; +} + +export default class WheelPicker { + constructor(options: IWheelPickerOptions); + /** + * 返回值数组或指定列的值 + */ + public getValue(index: number): IData; + /** + * 设置各列的值或指定列的值 + */ + public setValue(value: string, index?: number): void; + /** + * 返回选中的条目数组 + */ + public getSelectedItems(): IData[]; + /** + * 返回数据数组或指定列的数据 + */ + public getData(index?: number): IData[] | IData[][]; + /** + * 设置各列或指定列的数据和值 + */ + public setData(data: IData[] | IData[][], index: number, value: string | string[]); + /** + * 显示组件 + */ + public show(); + /** + * 隐藏组件 + */ + public hide(); + /** + * 启用组件 + */ + public enable(); + /** + * 禁用组件 + */ + public disable(); + /** + * 销毁组件 + */ + public destory(); +} diff --git a/package.json b/package.json index 7fa5c15..0ade26a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "wheel-picker", - "version": "1.1.0", + "name": "@feidao-msz/wheel-picker", + "version": "1.0.201910161500", "description": "仿 iOS UIPickerView 的滚动选择器", "main": "dist/wheelpicker.min.js", "keywords": [ @@ -8,8 +8,8 @@ "滚动选择" ], "scripts": { - "build": "webpack --optimize-minimize", - "dev": "webpack --progress --colors --watch" + "build": "gulp", + "dev": "gulp && gulp watch & live-server" }, "author": "Cople", "license": "MIT", @@ -25,6 +25,9 @@ "postcss-loader": "^0.9.1", "sass-loader": "^3.2.3", "style-loader": "^0.13.1", - "webpack": "^1.13.2" + "webpack": "^1.13.2", + "gulp": "4.0.2", + "webpack-stream": "5.2.1", + "live-server": "latest" } } diff --git a/publish.sh b/publish.sh new file mode 100755 index 0000000..571ed2b --- /dev/null +++ b/publish.sh @@ -0,0 +1,3 @@ +#! /bin/bash +version='1.0.'$(date +%Y%m%d%H%M) +npm version ${version} && npm run build && npm publish --access public && git commit -am publish:${version} && git push diff --git a/wheel-index.html b/wheel-index.html new file mode 100755 index 0000000..dfcb2b2 --- /dev/null +++ b/wheel-index.html @@ -0,0 +1,195 @@ + + + + + + WheelPicker + + + + + + + +
+

WheelPicker

+

仿 iOS UIPickerView 的滚动选择器

+ +
+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file