From 446dff22112357a63a07652355877287b0684142 Mon Sep 17 00:00:00 2001 From: Daniel Neu <42478861+danneu2s1fa@users.noreply.github.com> Date: Thu, 19 Mar 2020 12:06:13 -0400 Subject: [PATCH 01/15] Update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 71eea61caa..9d15bd5b36 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# react-native-datepicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) [![Monthly download](https://img.shields.io/npm/dm/react-native-datepicker.svg)](https://img.shields.io/npm/dm/react-native-datepicker.svg) [![Total downloads](https://img.shields.io/npm/dt/react-native-datepicker.svg)](https://img.shields.io/npm/dt/react-native-datepicker.svg) -React Native DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS +# react-native-yearpicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) [![Monthly download](https://img.shields.io/npm/dm/react-native-datepicker.svg)](https://img.shields.io/npm/dm/react-native-datepicker.svg) [![Total downloads](https://img.shields.io/npm/dt/react-native-datepicker.svg)](https://img.shields.io/npm/dt/react-native-datepicker.svg) +React Native YearPicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS ## Install ```bash -npm install react-native-datepicker --save +npm install react-native-yearpicker --save ``` Or using [react-native-ui-xg](https://github.com/xgfe/react-native-ui-xg), our react-naitve ui kit. @@ -24,9 +24,9 @@ Check [index.android.js](https://github.com/xgfe/react-native-datepicker/blob/ma ```javascript import React, { Component } from 'react' -import DatePicker from 'react-native-datepicker' +import YearPicker from 'react-native-yearpicker' -export default class MyDatePicker extends Component { +export default class MyYearPicker extends Component { constructor(props){ super(props) this.state = {date:"2016-05-15"} @@ -34,7 +34,7 @@ export default class MyDatePicker extends Component { render(){ return ( - Date: Thu, 19 Mar 2020 12:23:41 -0400 Subject: [PATCH 02/15] Create npmpublish.yml --- .github/workflows/npmpublish.yml | 48 ++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 .github/workflows/npmpublish.yml diff --git a/.github/workflows/npmpublish.yml b/.github/workflows/npmpublish.yml new file mode 100644 index 0000000000..81cbddb750 --- /dev/null +++ b/.github/workflows/npmpublish.yml @@ -0,0 +1,48 @@ +# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created +# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages + +name: Node.js Package + +on: + release: + types: [created] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 12 + - run: npm ci + - run: npm test + + publish-npm: + needs: build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://registry.npmjs.org/ + - run: npm ci + - run: npm publish + env: + NODE_AUTH_TOKEN: ${{secrets.npm_token}} + + publish-gpr: + needs: build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 12 + registry-url: https://npm.pkg.github.com/ + scope: '@your-github-username' + - run: npm ci + - run: npm publish + env: + NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} From 76b0e0cb4b583282a21f43013f0e69caf4fde7bc Mon Sep 17 00:00:00 2001 From: Daniel Neu <42478861+danneu2s1fa@users.noreply.github.com> Date: Thu, 19 Mar 2020 12:44:28 -0400 Subject: [PATCH 03/15] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9d15bd5b36..b6e2b15288 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# react-native-yearpicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) [![Monthly download](https://img.shields.io/npm/dm/react-native-datepicker.svg)](https://img.shields.io/npm/dm/react-native-datepicker.svg) [![Total downloads](https://img.shields.io/npm/dt/react-native-datepicker.svg)](https://img.shields.io/npm/dt/react-native-datepicker.svg) +# react-native-yearpicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) [![Monthly download](https://img.shields.io/npm/dm/react-native-datepicker.svg)](https://img.shields.io/npm/dm/react-native-datepicker.svg) [![Total downloads] React Native YearPicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS ## Install From 5818d201e28693394e4276ba26dfc41e432e9247 Mon Sep 17 00:00:00 2001 From: Daniel Neu <42478861+danneu2s1fa@users.noreply.github.com> Date: Thu, 19 Mar 2020 12:44:59 -0400 Subject: [PATCH 04/15] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b6e2b15288..8b50e48fe2 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# react-native-yearpicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) [![Monthly download](https://img.shields.io/npm/dm/react-native-datepicker.svg)](https://img.shields.io/npm/dm/react-native-datepicker.svg) [![Total downloads] +# react-native-yearpicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) [![Monthly download] [![Total downloads] React Native YearPicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS ## Install From a56b295d4f1a82037677151fbcee46d6d2eceffd Mon Sep 17 00:00:00 2001 From: Daniel Neu <42478861+danneu2s1fa@users.noreply.github.com> Date: Thu, 19 Mar 2020 12:45:17 -0400 Subject: [PATCH 05/15] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b50e48fe2..2b7692c185 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# react-native-yearpicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) [![Monthly download] [![Total downloads] +# react-native-yearpicker [![Build Status](https://travis-ci.org/xgfe/react-native-datepicker.svg?branch=master)](https://travis-ci.org/xgfe/react-native-datepicker) [![Coverage Status](https://coveralls.io/repos/github/xgfe/react-native-datepicker/badge.svg?branch=master)](https://coveralls.io/github/xgfe/react-native-datepicker?branch=master) React Native YearPicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS ## Install From 151780d166937f3bca7576e9bc484f1300d78fa5 Mon Sep 17 00:00:00 2001 From: Daniel Neu Date: Thu, 19 Mar 2020 13:03:13 -0400 Subject: [PATCH 06/15] Change to allow for year values Change to allow for year values --- package.json | 80 ++++-- package.json.bak.json | 66 +++++ style.js | 22 +- year_picker.js | 622 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 755 insertions(+), 35 deletions(-) create mode 100644 package.json.bak.json mode change 100644 => 100755 style.js create mode 100755 year_picker.js diff --git a/package.json b/package.json index 61c053779c..bcb024b01a 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,45 @@ { - "name": "react-native-datepicker", - "version": "1.7.2", - "description": "React Native DatePicker component for both Android and iOS, useing DatePickerAndroid, TimePickerAndroid and DatePickerIOS", - "main": "datepicker.js", - "scripts": { - "start": "node node_modules/react-native/local-cli/cli.js start", - "test": "jest --coverage", - "coverage": "cat ./coverage/lcov.info | coveralls", - "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", - "lint": "eslint ." - }, - "repository": { - "type": "git", - "url": "git+https://github.com/xgfe/react-native-datepicker.git" + "_from": "react-native-datepicker", + "_id": "react-native-datepicker@1.7.2", + "_inBundle": false, + "_integrity": "sha1-WNCCJZGgrJsyq6CCZQIioO4pZp0=", + "_location": "/react-native-datepicker", + "_phantomChildren": {}, + "_requested": { + "type": "tag", + "registry": true, + "raw": "react-native-yearpicker", + "name": "react-native-yearpicker", + "escapedName": "react-native-yearpicker", + "rawSpec": "", + "saveSpec": null, + "fetchSpec": "latest" }, - "keywords": [ - "react-native", - "DatePicker" + "_requiredBy": [ + "#USER", + "/" ], - "author": "xgfe", - "license": "MIT", + "_resolved": "https://registry.npmjs.org/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz", + "_shasum": "58d0822591a0ac9b32aba082650222a0ee29669d", + "_spec": "react-native-yearpicker", + "_where": "/Users/danielneu/work/teamraise", + "author": { + "name": "xgfe" + }, "bugs": { "url": "https://github.com/xgfe/react-native-datepicker/issues" }, - "homepage": "https://github.com/xgfe/react-native-datepicker#readme", + "bundleDependencies": false, + "config": { + "commitizen": { + "path": "./node_modules/cz-conventional-changelog" + } + }, "dependencies": { "moment": "^2.22.0" }, + "deprecated": false, + "description": "React Native Picker Modal to add Picker for iOS with a modifiication of DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS", "devDependencies": { "babel-core": "^6.5.2", "babel-eslint": "^7.2.3", @@ -48,11 +61,7 @@ "react-native": "0.49.3", "react-test-renderer": "16.0.0-beta.5" }, - "config": { - "commitizen": { - "path": "./node_modules/cz-conventional-changelog" - } - }, + "homepage": "https://github.com/xgfe/react-native-yearpicker#readme", "jest": { "preset": "react-native", "testPathIgnorePatterns": [ @@ -60,7 +69,26 @@ "tools/" ] }, + "keywords": [ + "react-native", + "DatePicker" + ], + "license": "MIT", + "main": "picker_modal.js", + "name": "react-native-yearpicker", "pre-commit": [ "lint" - ] + ], + "repository": { + "type": "git", + "url": "git+https://github.com/xgfe/react-native-datepicker.git" + }, + "scripts": { + "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", + "coverage": "cat ./coverage/lcov.info | coveralls", + "lint": "eslint .", + "start": "node node_modules/react-native/local-cli/cli.js start", + "test": "jest --coverage" + }, + "version": "1.7.2" } diff --git a/package.json.bak.json b/package.json.bak.json new file mode 100644 index 0000000000..61c053779c --- /dev/null +++ b/package.json.bak.json @@ -0,0 +1,66 @@ +{ + "name": "react-native-datepicker", + "version": "1.7.2", + "description": "React Native DatePicker component for both Android and iOS, useing DatePickerAndroid, TimePickerAndroid and DatePickerIOS", + "main": "datepicker.js", + "scripts": { + "start": "node node_modules/react-native/local-cli/cli.js start", + "test": "jest --coverage", + "coverage": "cat ./coverage/lcov.info | coveralls", + "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", + "lint": "eslint ." + }, + "repository": { + "type": "git", + "url": "git+https://github.com/xgfe/react-native-datepicker.git" + }, + "keywords": [ + "react-native", + "DatePicker" + ], + "author": "xgfe", + "license": "MIT", + "bugs": { + "url": "https://github.com/xgfe/react-native-datepicker/issues" + }, + "homepage": "https://github.com/xgfe/react-native-datepicker#readme", + "dependencies": { + "moment": "^2.22.0" + }, + "devDependencies": { + "babel-core": "^6.5.2", + "babel-eslint": "^7.2.3", + "babel-jest": "21.2.0", + "babel-preset-react-native": "4.0.0", + "coveralls": "^2.11.9", + "cz-conventional-changelog": "^1.2.0", + "enzyme": "^3.1.0", + "enzyme-adapter-react-16": "^1.0.2", + "eslint": "^3.19.0", + "eslint-plugin-react": "^7.0.1", + "inquirer": "^3.0.5", + "jest": "21.2.1", + "jsdom": "^11.3.0", + "jsdom-global": "^3.0.2", + "pre-commit": "^1.1.3", + "react": "16.0.0-beta.5", + "react-dom": "16.0.0-beta.5", + "react-native": "0.49.3", + "react-test-renderer": "16.0.0-beta.5" + }, + "config": { + "commitizen": { + "path": "./node_modules/cz-conventional-changelog" + } + }, + "jest": { + "preset": "react-native", + "testPathIgnorePatterns": [ + "/node_modules/", + "tools/" + ] + }, + "pre-commit": [ + "lint" + ] +} diff --git a/style.js b/style.js old mode 100644 new mode 100755 index 30d2cc6620..998f8629e2 --- a/style.js +++ b/style.js @@ -19,25 +19,29 @@ let style = StyleSheet.create({ dateInput: { flex: 1, height: 40, - borderWidth: 1, - borderColor: '#aaa', + borderBottomWidth: 1, + borderColor: '#ccc', alignItems: 'center', justifyContent: 'center' }, dateText: { - color: '#333' + color: '#333', + fontSize:36 }, placeholderText: { - color: '#c9c9c9' + color: '#C7C7CD', // was: #c9c9c9 + fontSize: 23, + + }, datePickerMask: { flex: 1, alignItems: 'flex-end', flexDirection: 'row', - backgroundColor: '#00000077' + backgroundColor: 'transparent'// was '#00000077' }, datePickerCon: { - backgroundColor: '#fff', + backgroundColor: '#ddd', // was: '#fff' height: 0, overflow: 'hidden' }, @@ -52,7 +56,7 @@ let style = StyleSheet.create({ }, btnTextText: { fontSize: 16, - color: '#46cf98' + color: '#000000'// was: '#46cf98' }, btnTextCancel: { color: '#666' @@ -65,8 +69,8 @@ let style = StyleSheet.create({ }, datePicker: { marginTop: 42, - borderTopColor: '#ccc', - borderTopWidth: 1 + borderTopColor: '#ccc', // was: #ccc + borderTopWidth: 1, }, disabled: { backgroundColor: '#eee' diff --git a/year_picker.js b/year_picker.js new file mode 100755 index 0000000000..a5efbdd12d --- /dev/null +++ b/year_picker.js @@ -0,0 +1,622 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import { + View, + Text, + Image, + Modal, + TouchableHighlight, + DatePickerAndroid, + TimePickerAndroid, + DatePickerIOS, + Picker, + Platform, + Animated, + Keyboard +} from 'react-native'; +import Style from './style'; +import Moment from 'moment'; + +import {years} from '../../../teamraise/app/lib/config'; + +const FORMATS = { + 'date': 'YYYY-MM-DD', + 'datetime': 'YYYY-MM-DD HH:mm', + 'time': 'HH:mm', + 'year': 'YYYY' +}; + +const PickerItem = Picker.Item; + +let date + + +const SUPPORTED_ORIENTATIONS = ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']; + +class DatePicker extends Component { + constructor(props) { + super(props); + + console.log ("picker_modal,js, constructor, props:", props) + + this.state = { + date: this.props.year, + modalVisible: false, + animatedHeight: new Animated.Value(0), + allowPointerEvents: true, + index: null, + dateInstance: 0, + isEnabled: this.props.isEnabled, + + // selectedValue= {this.state.index ? this.state.index : this.getDateStr(this.props.yearIndex) }// to display currently selected year -> {this.props.yearIndex} // @TODO: to set value based on min / max with this.state.index, however it does not update the selected date as there is no min/max date in Picker. + + }; + + this.getDate = this.getDate.bind(this); + this.getDateStr = this.getDateStr.bind(this); + this.datePicked = this.datePicked.bind(this); + this.onPressDate = this.onPressDate.bind(this); + this.onPressCancel = this.onPressCancel.bind(this); + this.onPressConfirm = this.onPressConfirm.bind(this); + this.onDateChange = this.onDateChange.bind(this); + this.onPressMask = this.onPressMask.bind(this); + this.onDatePicked = this.onDatePicked.bind(this); + this.onTimePicked = this.onTimePicked.bind(this); + this.onDatetimePicked = this.onDatetimePicked.bind(this); + this.onDatetimeTimePicked = this.onDatetimeTimePicked.bind(this); + this.setModalVisible = this.setModalVisible.bind(this); + + } + + componentWillReceiveProps(nextProps) { + + console.log ("picker_modal,js, componentWillReceiveProps, nextProps:", nextProps) + if (nextProps.date !== this.props.date) { + this.setState({date: this.getDate(nextProps.date)}); + } + + if (nextProps.yearIndex !== this.props.yearIndex) { + // this.setState({date: this.getDate(nextProps.date)}); + + console.log('IN HERE!!!!! componentWillReceiveProps, nextProps.yearIndex: ', nextProps.yearIndex) + } + + } + + setModalVisible(visible) { + const {height, duration} = this.props; + + // slide animation + if (visible) { + this.setState({modalVisible: visible}); + return Animated.timing( + this.state.animatedHeight, + { + toValue: height, + duration: duration + } + ).start(); + } else { + return Animated.timing( + this.state.animatedHeight, + { + toValue: 0, + duration: duration + } + ).start(() => { + this.setState({modalVisible: visible}); + }); + } + } + + onStartShouldSetResponder(e) { + return true; + } + + onMoveShouldSetResponder(e) { + return true; + } + + onPressMask() { + if (typeof this.props.onPressMask === 'function') { + this.props.onPressMask(); + } else { + this.onPressCancel(); + } + } + + onPressCancel() { + this.setModalVisible(false); + + if (typeof this.props.onCloseModal === 'function') { + this.props.onCloseModal(); + } + } + + onPressConfirm() { + this.datePicked(); + this.setModalVisible(false); + + if (typeof this.props.onCloseModal === 'function') { + this.props.onCloseModal(); + } + } + + // getDate(date = this.props.date) { + // const {mode, minDate, maxDate, format = FORMATS[mode]} = this.props; + + // // date默认值 + // if (!date) { + // let now = new Date(); + // if (minDate) { + // let _minDate = this.getDate(minDate); + + // if (now < _minDate) { + // return _minDate; + // } + // } + + // if (maxDate) { + // let _maxDate = this.getDate(maxDate); + + // if (now > _maxDate) { + // return _maxDate; + // } + // } + + // return now; + // } + + // if (date instanceof Date) { + // return date; + // } + + // return Moment(date, format).toDate(); + // } + + componentDidUpdate(prevProps, prevState) { + console.log ('picker_modal,js, componentDidUpdate(), props:', this.props) + + if (this.props.yearIndex!= prevProps.yearIndex ) { + + yearIndex = this.props.year + console.log ('picker_modal,js, componentDidUpdate(), this.props.year = yearIndex, yearIndex:', yearIndex) + } + + if (prevProps.isEnabled != this.props.isEnabled) { + this.setState( + { isEnabled: this.props.isEnabled} + ) + } + } + + getDate(date = this.props.year ) { // date = this.props.date, + const {mode, minDate, maxDate, format = FORMATS[mode]} = this.props; + let dateAfterTest = date; // setup as date and run test below + + // date默认值 + if (date) { + let now = new Date(); + now = now.getFullYear(); + + if (minDate) { + let _minDate = this.props.minDate; + + if (date < _minDate) { + // return _minDate; + + dateAfterTest = _minDate + } + } + + if (maxDate) { + let _maxDate = this.props.maxDate; + + if (date > _maxDate) { + // return _maxDate; + dateAfterTest = _maxDate; + } + } + + return dateAfterTest; + } + + // if (date instanceof Date) { + // return date; + // } + + return dateAfterTest; + } + + + getDateStr( date = this.props.year ) { + const { mode, format = FORMATS[mode]} = this.props; + console.log ('getDateStr(), this.props.yearIndex, ', this.props.yearIndex) + console.log ('getDateStr(), this.state.date, ', this.state.date) + + + let dateInstance = this.props.year < this.props.maxYear // changed date to this.props.year for currently selected year// = date instanceof Date + ? this.props.year + : this.props.maxYear + + + + let index = years.findIndex(p => p.year == dateInstance) + + // if (typeof this.props.getDateStr === 'function') { + // return this.props.getDateStr(dateInstance); + // } + + this.setState({ + index, + dateInstance, + + }, () => { + console.log ('getDateStr(), this.state.index, ', this.state.index) + console.log ('getDateStr(), this.state.index, ', this.state.dateInstance) + // return this.state.dateInstance + + }) + + + + + + } + + datePicked() { + if (typeof this.props.onDateChange === 'function') { + this.props.onDateChange(this.getDateStr(this.state.date), this.state.date) // Need to return the index number for Years array// to display the selected year -> ( this.props.yearIndex); //@TODO: to limit date min / max need pass to try this and fix it: this.props.onDateChange( this.getDateStr(this.state.date)); + } + } + + getTitleElement() { + const {date, placeholder, customStyles, allowFontScaling} = this.props; + + if (!date && placeholder) { + return ( + + {placeholder} + + ); + } + return ( + + {this.props.year} { /* // to display smaller of selected year or maxYear {this.state.dateInstance ? this.state.dateInstance: this.getDateStr(this.props.year) */} { /* // -> to display the currently selected year: {this.props.year} */}{/* {this.getDateStr()} // to get the max/min allowable date, however it does not update the picker, need to change the onSelectValue = this.state.index*/} + + ); + } + + onDateChange(date) { + console.log ('picker_modal.js, onDateChange(), date: ', date) + this.setState({ + allowPointerEvents: false, + date: date + }); + const timeoutId = setTimeout(() => { + this.setState({ + allowPointerEvents: true + }); + clearTimeout(timeoutId); + }, 200); + } + + onDatePicked({action, year, month, day}) { + if (action !== DatePickerAndroid.dismissedAction) { + this.setState({ + date: new Date(year, month, day) + }); + this.datePicked(); + } else { + this.onPressCancel(); + } + } + + onTimePicked({action, hour, minute}) { + if (action !== DatePickerAndroid.dismissedAction) { + this.setState({ + date: Moment().hour(hour).minute(minute).toDate() + }); + this.datePicked(); + } else { + this.onPressCancel(); + } + } + + onDatetimePicked({action, year, month, day}) { + const {mode, androidMode, format = FORMATS[mode], is24Hour = !format.match(/h|a/)} = this.props; + + if (action !== DatePickerAndroid.dismissedAction) { + let timeMoment = Moment(this.state.date); + + TimePickerAndroid.open({ + hour: timeMoment.hour(), + minute: timeMoment.minutes(), + is24Hour: is24Hour, + mode: androidMode + }).then(this.onDatetimeTimePicked.bind(this, year, month, day)); + } else { + this.onPressCancel(); + } + } + + onDatetimeTimePicked(year, month, day, {action, hour, minute}) { + if (action !== DatePickerAndroid.dismissedAction) { + this.setState({ + date: new Date(year, month, day, hour, minute) + }); + this.datePicked(); + } else { + this.onPressCancel(); + } + } + + + onPressDate() { + if (this.props.disabled) { + return true; + } + + Keyboard.dismiss(); + + // reset state + this.setState({ + date: this.getDate() + }); + + if (Platform.OS === 'ios') { + this.setModalVisible(true); + } else { + + const {mode, androidMode, format = FORMATS[mode], minDate, maxDate, is24Hour = !format.match(/h|a/)} = this.props; + + // 选日期 + if (mode === 'date') { + DatePickerAndroid.open({ + date: this.state.date, + minDate: minDate && this.getDate(minDate), + maxDate: maxDate && this.getDate(maxDate), + mode: androidMode + }).then(this.onDatePicked); + } else if (mode === 'time') { + // 选时间 + + let timeMoment = Moment(this.state.date); + + TimePickerAndroid.open({ + hour: timeMoment.hour(), + minute: timeMoment.minutes(), + is24Hour: is24Hour, + mode: androidMode + }).then(this.onTimePicked); + } else if (mode === 'datetime') { + // 选日期和时间 + + DatePickerAndroid.open({ + date: this.state.date, + minDate: minDate && this.getDate(minDate), + maxDate: maxDate && this.getDate(maxDate), + mode: androidMode + }).then(this.onDatetimePicked); + } + } + + if (typeof this.props.onOpenModal === 'function') { + this.props.onOpenModal(); + } + } + + _renderIcon() { + const { + showIcon, + iconSource, + iconComponent, + customStyles + } = this.props; + + if (showIcon) { + if (iconComponent) { + return iconComponent; + } + return ( + + ); + } + + return null; + } + + render() { + const { + mode, + style, + customStyles, + disabled, + minDate, + maxDate, + minuteInterval, + timeZoneOffsetInMinutes, + cancelBtnText, + confirmBtnText, + TouchableComponent, + testID, + cancelBtnTestID, + confirmBtnTestID, + allowFontScaling, + locale + } = this.props; + + const dateInputStyle = [ + Style.dateInput, customStyles.dateInput, + disabled && Style.disabled, + disabled && customStyles.disabled + ]; + + if (this.props.isEnabled) { + return ( + + + + + { + !this.props.hideText ? + + {this.getTitleElement()} + + : + + } + {this._renderIcon()} + {Platform.OS === 'ios' && {this.setModalVisible(false);}} + > + + + + + + + {this.props.yearIndex}. Tried to set to max year but did not work using: this.state.index. also not able to use: this.state.index? this.getDateStr() : this.props.yearIndex // ISSUE: to set value based on min / max - however it does not update the selected date as there is no min/max date in Picker. + onValueChange={(year) => this.props.onDateChange(year)} + enabled = {this.props.isEnabled} // picker modal appears, but cannot select - don't like the interface, prefer to hide it as done above with check on view. + > + {Object.keys(years).map((year) => ( + + ))} + + + + + + + {cancelBtnText} + + + + + {confirmBtnText} + + + + + + + } + + + + ) } else { + return + + } + + } // END: render() +} // END: class DatePicker + +DatePicker.defaultProps = { + mode: 'date', + androidMode: 'default', + date: '', + // component height: 216(DatePickerIOS) + 1(borderTop) + 42(marginTop), IOS only + height: 259, + + // slide animation duration time, default to 300ms, IOS only + duration: 300, + confirmBtnText: '确定', + cancelBtnText: '取消', + iconSource: require('./date_icon.png'), + customStyles: {}, + + // whether or not show the icon + showIcon: false, // changed to hide icon. not able to pass with props. + disabled: false, + allowFontScaling: true, + hideText: false, + placeholder: '', + TouchableComponent: TouchableHighlight, + modalOnResponderTerminationRequest: e => true +}; + +DatePicker.propTypes = { + mode: PropTypes.oneOf(['date', 'datetime', 'time']), + androidMode: PropTypes.oneOf(['clock', 'calendar', 'spinner', 'default']), + date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date), PropTypes.object]), + format: PropTypes.string, + minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), + maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), + height: PropTypes.number, + duration: PropTypes.number, + confirmBtnText: PropTypes.string, + cancelBtnText: PropTypes.string, + iconSource: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), + iconComponent: PropTypes.element, + customStyles: PropTypes.object, + showIcon: PropTypes.bool, + disabled: PropTypes.bool, + allowFontScaling: PropTypes.bool, + onDateChange: PropTypes.func, + onOpenModal: PropTypes.func, + onCloseModal: PropTypes.func, + onPressMask: PropTypes.func, + placeholder: PropTypes.string, + modalOnResponderTerminationRequest: PropTypes.func, + is24Hour: PropTypes.bool, + getDateStr: PropTypes.func, + locale: PropTypes.string +}; + +export default DatePicker; From cb9d8c7258bfc4a53367b6c0768bdee484f6d95c Mon Sep 17 00:00:00 2001 From: Daniel Neu Date: Thu, 19 Mar 2020 13:04:52 -0400 Subject: [PATCH 07/15] Revert "Change to allow for year values" This reverts commit 151780d166937f3bca7576e9bc484f1300d78fa5. --- package.json | 80 ++---- package.json.bak.json | 66 ----- style.js | 22 +- year_picker.js | 622 ------------------------------------------ 4 files changed, 35 insertions(+), 755 deletions(-) delete mode 100644 package.json.bak.json mode change 100755 => 100644 style.js delete mode 100755 year_picker.js diff --git a/package.json b/package.json index bcb024b01a..61c053779c 100644 --- a/package.json +++ b/package.json @@ -1,45 +1,32 @@ { - "_from": "react-native-datepicker", - "_id": "react-native-datepicker@1.7.2", - "_inBundle": false, - "_integrity": "sha1-WNCCJZGgrJsyq6CCZQIioO4pZp0=", - "_location": "/react-native-datepicker", - "_phantomChildren": {}, - "_requested": { - "type": "tag", - "registry": true, - "raw": "react-native-yearpicker", - "name": "react-native-yearpicker", - "escapedName": "react-native-yearpicker", - "rawSpec": "", - "saveSpec": null, - "fetchSpec": "latest" + "name": "react-native-datepicker", + "version": "1.7.2", + "description": "React Native DatePicker component for both Android and iOS, useing DatePickerAndroid, TimePickerAndroid and DatePickerIOS", + "main": "datepicker.js", + "scripts": { + "start": "node node_modules/react-native/local-cli/cli.js start", + "test": "jest --coverage", + "coverage": "cat ./coverage/lcov.info | coveralls", + "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", + "lint": "eslint ." }, - "_requiredBy": [ - "#USER", - "/" - ], - "_resolved": "https://registry.npmjs.org/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz", - "_shasum": "58d0822591a0ac9b32aba082650222a0ee29669d", - "_spec": "react-native-yearpicker", - "_where": "/Users/danielneu/work/teamraise", - "author": { - "name": "xgfe" + "repository": { + "type": "git", + "url": "git+https://github.com/xgfe/react-native-datepicker.git" }, + "keywords": [ + "react-native", + "DatePicker" + ], + "author": "xgfe", + "license": "MIT", "bugs": { "url": "https://github.com/xgfe/react-native-datepicker/issues" }, - "bundleDependencies": false, - "config": { - "commitizen": { - "path": "./node_modules/cz-conventional-changelog" - } - }, + "homepage": "https://github.com/xgfe/react-native-datepicker#readme", "dependencies": { "moment": "^2.22.0" }, - "deprecated": false, - "description": "React Native Picker Modal to add Picker for iOS with a modifiication of DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS", "devDependencies": { "babel-core": "^6.5.2", "babel-eslint": "^7.2.3", @@ -61,7 +48,11 @@ "react-native": "0.49.3", "react-test-renderer": "16.0.0-beta.5" }, - "homepage": "https://github.com/xgfe/react-native-yearpicker#readme", + "config": { + "commitizen": { + "path": "./node_modules/cz-conventional-changelog" + } + }, "jest": { "preset": "react-native", "testPathIgnorePatterns": [ @@ -69,26 +60,7 @@ "tools/" ] }, - "keywords": [ - "react-native", - "DatePicker" - ], - "license": "MIT", - "main": "picker_modal.js", - "name": "react-native-yearpicker", "pre-commit": [ "lint" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/xgfe/react-native-datepicker.git" - }, - "scripts": { - "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", - "coverage": "cat ./coverage/lcov.info | coveralls", - "lint": "eslint .", - "start": "node node_modules/react-native/local-cli/cli.js start", - "test": "jest --coverage" - }, - "version": "1.7.2" + ] } diff --git a/package.json.bak.json b/package.json.bak.json deleted file mode 100644 index 61c053779c..0000000000 --- a/package.json.bak.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "name": "react-native-datepicker", - "version": "1.7.2", - "description": "React Native DatePicker component for both Android and iOS, useing DatePickerAndroid, TimePickerAndroid and DatePickerIOS", - "main": "datepicker.js", - "scripts": { - "start": "node node_modules/react-native/local-cli/cli.js start", - "test": "jest --coverage", - "coverage": "cat ./coverage/lcov.info | coveralls", - "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", - "lint": "eslint ." - }, - "repository": { - "type": "git", - "url": "git+https://github.com/xgfe/react-native-datepicker.git" - }, - "keywords": [ - "react-native", - "DatePicker" - ], - "author": "xgfe", - "license": "MIT", - "bugs": { - "url": "https://github.com/xgfe/react-native-datepicker/issues" - }, - "homepage": "https://github.com/xgfe/react-native-datepicker#readme", - "dependencies": { - "moment": "^2.22.0" - }, - "devDependencies": { - "babel-core": "^6.5.2", - "babel-eslint": "^7.2.3", - "babel-jest": "21.2.0", - "babel-preset-react-native": "4.0.0", - "coveralls": "^2.11.9", - "cz-conventional-changelog": "^1.2.0", - "enzyme": "^3.1.0", - "enzyme-adapter-react-16": "^1.0.2", - "eslint": "^3.19.0", - "eslint-plugin-react": "^7.0.1", - "inquirer": "^3.0.5", - "jest": "21.2.1", - "jsdom": "^11.3.0", - "jsdom-global": "^3.0.2", - "pre-commit": "^1.1.3", - "react": "16.0.0-beta.5", - "react-dom": "16.0.0-beta.5", - "react-native": "0.49.3", - "react-test-renderer": "16.0.0-beta.5" - }, - "config": { - "commitizen": { - "path": "./node_modules/cz-conventional-changelog" - } - }, - "jest": { - "preset": "react-native", - "testPathIgnorePatterns": [ - "/node_modules/", - "tools/" - ] - }, - "pre-commit": [ - "lint" - ] -} diff --git a/style.js b/style.js old mode 100755 new mode 100644 index 998f8629e2..30d2cc6620 --- a/style.js +++ b/style.js @@ -19,29 +19,25 @@ let style = StyleSheet.create({ dateInput: { flex: 1, height: 40, - borderBottomWidth: 1, - borderColor: '#ccc', + borderWidth: 1, + borderColor: '#aaa', alignItems: 'center', justifyContent: 'center' }, dateText: { - color: '#333', - fontSize:36 + color: '#333' }, placeholderText: { - color: '#C7C7CD', // was: #c9c9c9 - fontSize: 23, - - + color: '#c9c9c9' }, datePickerMask: { flex: 1, alignItems: 'flex-end', flexDirection: 'row', - backgroundColor: 'transparent'// was '#00000077' + backgroundColor: '#00000077' }, datePickerCon: { - backgroundColor: '#ddd', // was: '#fff' + backgroundColor: '#fff', height: 0, overflow: 'hidden' }, @@ -56,7 +52,7 @@ let style = StyleSheet.create({ }, btnTextText: { fontSize: 16, - color: '#000000'// was: '#46cf98' + color: '#46cf98' }, btnTextCancel: { color: '#666' @@ -69,8 +65,8 @@ let style = StyleSheet.create({ }, datePicker: { marginTop: 42, - borderTopColor: '#ccc', // was: #ccc - borderTopWidth: 1, + borderTopColor: '#ccc', + borderTopWidth: 1 }, disabled: { backgroundColor: '#eee' diff --git a/year_picker.js b/year_picker.js deleted file mode 100755 index a5efbdd12d..0000000000 --- a/year_picker.js +++ /dev/null @@ -1,622 +0,0 @@ -import React, {Component} from 'react'; -import PropTypes from 'prop-types'; -import { - View, - Text, - Image, - Modal, - TouchableHighlight, - DatePickerAndroid, - TimePickerAndroid, - DatePickerIOS, - Picker, - Platform, - Animated, - Keyboard -} from 'react-native'; -import Style from './style'; -import Moment from 'moment'; - -import {years} from '../../../teamraise/app/lib/config'; - -const FORMATS = { - 'date': 'YYYY-MM-DD', - 'datetime': 'YYYY-MM-DD HH:mm', - 'time': 'HH:mm', - 'year': 'YYYY' -}; - -const PickerItem = Picker.Item; - -let date - - -const SUPPORTED_ORIENTATIONS = ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']; - -class DatePicker extends Component { - constructor(props) { - super(props); - - console.log ("picker_modal,js, constructor, props:", props) - - this.state = { - date: this.props.year, - modalVisible: false, - animatedHeight: new Animated.Value(0), - allowPointerEvents: true, - index: null, - dateInstance: 0, - isEnabled: this.props.isEnabled, - - // selectedValue= {this.state.index ? this.state.index : this.getDateStr(this.props.yearIndex) }// to display currently selected year -> {this.props.yearIndex} // @TODO: to set value based on min / max with this.state.index, however it does not update the selected date as there is no min/max date in Picker. - - }; - - this.getDate = this.getDate.bind(this); - this.getDateStr = this.getDateStr.bind(this); - this.datePicked = this.datePicked.bind(this); - this.onPressDate = this.onPressDate.bind(this); - this.onPressCancel = this.onPressCancel.bind(this); - this.onPressConfirm = this.onPressConfirm.bind(this); - this.onDateChange = this.onDateChange.bind(this); - this.onPressMask = this.onPressMask.bind(this); - this.onDatePicked = this.onDatePicked.bind(this); - this.onTimePicked = this.onTimePicked.bind(this); - this.onDatetimePicked = this.onDatetimePicked.bind(this); - this.onDatetimeTimePicked = this.onDatetimeTimePicked.bind(this); - this.setModalVisible = this.setModalVisible.bind(this); - - } - - componentWillReceiveProps(nextProps) { - - console.log ("picker_modal,js, componentWillReceiveProps, nextProps:", nextProps) - if (nextProps.date !== this.props.date) { - this.setState({date: this.getDate(nextProps.date)}); - } - - if (nextProps.yearIndex !== this.props.yearIndex) { - // this.setState({date: this.getDate(nextProps.date)}); - - console.log('IN HERE!!!!! componentWillReceiveProps, nextProps.yearIndex: ', nextProps.yearIndex) - } - - } - - setModalVisible(visible) { - const {height, duration} = this.props; - - // slide animation - if (visible) { - this.setState({modalVisible: visible}); - return Animated.timing( - this.state.animatedHeight, - { - toValue: height, - duration: duration - } - ).start(); - } else { - return Animated.timing( - this.state.animatedHeight, - { - toValue: 0, - duration: duration - } - ).start(() => { - this.setState({modalVisible: visible}); - }); - } - } - - onStartShouldSetResponder(e) { - return true; - } - - onMoveShouldSetResponder(e) { - return true; - } - - onPressMask() { - if (typeof this.props.onPressMask === 'function') { - this.props.onPressMask(); - } else { - this.onPressCancel(); - } - } - - onPressCancel() { - this.setModalVisible(false); - - if (typeof this.props.onCloseModal === 'function') { - this.props.onCloseModal(); - } - } - - onPressConfirm() { - this.datePicked(); - this.setModalVisible(false); - - if (typeof this.props.onCloseModal === 'function') { - this.props.onCloseModal(); - } - } - - // getDate(date = this.props.date) { - // const {mode, minDate, maxDate, format = FORMATS[mode]} = this.props; - - // // date默认值 - // if (!date) { - // let now = new Date(); - // if (minDate) { - // let _minDate = this.getDate(minDate); - - // if (now < _minDate) { - // return _minDate; - // } - // } - - // if (maxDate) { - // let _maxDate = this.getDate(maxDate); - - // if (now > _maxDate) { - // return _maxDate; - // } - // } - - // return now; - // } - - // if (date instanceof Date) { - // return date; - // } - - // return Moment(date, format).toDate(); - // } - - componentDidUpdate(prevProps, prevState) { - console.log ('picker_modal,js, componentDidUpdate(), props:', this.props) - - if (this.props.yearIndex!= prevProps.yearIndex ) { - - yearIndex = this.props.year - console.log ('picker_modal,js, componentDidUpdate(), this.props.year = yearIndex, yearIndex:', yearIndex) - } - - if (prevProps.isEnabled != this.props.isEnabled) { - this.setState( - { isEnabled: this.props.isEnabled} - ) - } - } - - getDate(date = this.props.year ) { // date = this.props.date, - const {mode, minDate, maxDate, format = FORMATS[mode]} = this.props; - let dateAfterTest = date; // setup as date and run test below - - // date默认值 - if (date) { - let now = new Date(); - now = now.getFullYear(); - - if (minDate) { - let _minDate = this.props.minDate; - - if (date < _minDate) { - // return _minDate; - - dateAfterTest = _minDate - } - } - - if (maxDate) { - let _maxDate = this.props.maxDate; - - if (date > _maxDate) { - // return _maxDate; - dateAfterTest = _maxDate; - } - } - - return dateAfterTest; - } - - // if (date instanceof Date) { - // return date; - // } - - return dateAfterTest; - } - - - getDateStr( date = this.props.year ) { - const { mode, format = FORMATS[mode]} = this.props; - console.log ('getDateStr(), this.props.yearIndex, ', this.props.yearIndex) - console.log ('getDateStr(), this.state.date, ', this.state.date) - - - let dateInstance = this.props.year < this.props.maxYear // changed date to this.props.year for currently selected year// = date instanceof Date - ? this.props.year - : this.props.maxYear - - - - let index = years.findIndex(p => p.year == dateInstance) - - // if (typeof this.props.getDateStr === 'function') { - // return this.props.getDateStr(dateInstance); - // } - - this.setState({ - index, - dateInstance, - - }, () => { - console.log ('getDateStr(), this.state.index, ', this.state.index) - console.log ('getDateStr(), this.state.index, ', this.state.dateInstance) - // return this.state.dateInstance - - }) - - - - - - } - - datePicked() { - if (typeof this.props.onDateChange === 'function') { - this.props.onDateChange(this.getDateStr(this.state.date), this.state.date) // Need to return the index number for Years array// to display the selected year -> ( this.props.yearIndex); //@TODO: to limit date min / max need pass to try this and fix it: this.props.onDateChange( this.getDateStr(this.state.date)); - } - } - - getTitleElement() { - const {date, placeholder, customStyles, allowFontScaling} = this.props; - - if (!date && placeholder) { - return ( - - {placeholder} - - ); - } - return ( - - {this.props.year} { /* // to display smaller of selected year or maxYear {this.state.dateInstance ? this.state.dateInstance: this.getDateStr(this.props.year) */} { /* // -> to display the currently selected year: {this.props.year} */}{/* {this.getDateStr()} // to get the max/min allowable date, however it does not update the picker, need to change the onSelectValue = this.state.index*/} - - ); - } - - onDateChange(date) { - console.log ('picker_modal.js, onDateChange(), date: ', date) - this.setState({ - allowPointerEvents: false, - date: date - }); - const timeoutId = setTimeout(() => { - this.setState({ - allowPointerEvents: true - }); - clearTimeout(timeoutId); - }, 200); - } - - onDatePicked({action, year, month, day}) { - if (action !== DatePickerAndroid.dismissedAction) { - this.setState({ - date: new Date(year, month, day) - }); - this.datePicked(); - } else { - this.onPressCancel(); - } - } - - onTimePicked({action, hour, minute}) { - if (action !== DatePickerAndroid.dismissedAction) { - this.setState({ - date: Moment().hour(hour).minute(minute).toDate() - }); - this.datePicked(); - } else { - this.onPressCancel(); - } - } - - onDatetimePicked({action, year, month, day}) { - const {mode, androidMode, format = FORMATS[mode], is24Hour = !format.match(/h|a/)} = this.props; - - if (action !== DatePickerAndroid.dismissedAction) { - let timeMoment = Moment(this.state.date); - - TimePickerAndroid.open({ - hour: timeMoment.hour(), - minute: timeMoment.minutes(), - is24Hour: is24Hour, - mode: androidMode - }).then(this.onDatetimeTimePicked.bind(this, year, month, day)); - } else { - this.onPressCancel(); - } - } - - onDatetimeTimePicked(year, month, day, {action, hour, minute}) { - if (action !== DatePickerAndroid.dismissedAction) { - this.setState({ - date: new Date(year, month, day, hour, minute) - }); - this.datePicked(); - } else { - this.onPressCancel(); - } - } - - - onPressDate() { - if (this.props.disabled) { - return true; - } - - Keyboard.dismiss(); - - // reset state - this.setState({ - date: this.getDate() - }); - - if (Platform.OS === 'ios') { - this.setModalVisible(true); - } else { - - const {mode, androidMode, format = FORMATS[mode], minDate, maxDate, is24Hour = !format.match(/h|a/)} = this.props; - - // 选日期 - if (mode === 'date') { - DatePickerAndroid.open({ - date: this.state.date, - minDate: minDate && this.getDate(minDate), - maxDate: maxDate && this.getDate(maxDate), - mode: androidMode - }).then(this.onDatePicked); - } else if (mode === 'time') { - // 选时间 - - let timeMoment = Moment(this.state.date); - - TimePickerAndroid.open({ - hour: timeMoment.hour(), - minute: timeMoment.minutes(), - is24Hour: is24Hour, - mode: androidMode - }).then(this.onTimePicked); - } else if (mode === 'datetime') { - // 选日期和时间 - - DatePickerAndroid.open({ - date: this.state.date, - minDate: minDate && this.getDate(minDate), - maxDate: maxDate && this.getDate(maxDate), - mode: androidMode - }).then(this.onDatetimePicked); - } - } - - if (typeof this.props.onOpenModal === 'function') { - this.props.onOpenModal(); - } - } - - _renderIcon() { - const { - showIcon, - iconSource, - iconComponent, - customStyles - } = this.props; - - if (showIcon) { - if (iconComponent) { - return iconComponent; - } - return ( - - ); - } - - return null; - } - - render() { - const { - mode, - style, - customStyles, - disabled, - minDate, - maxDate, - minuteInterval, - timeZoneOffsetInMinutes, - cancelBtnText, - confirmBtnText, - TouchableComponent, - testID, - cancelBtnTestID, - confirmBtnTestID, - allowFontScaling, - locale - } = this.props; - - const dateInputStyle = [ - Style.dateInput, customStyles.dateInput, - disabled && Style.disabled, - disabled && customStyles.disabled - ]; - - if (this.props.isEnabled) { - return ( - - - - - { - !this.props.hideText ? - - {this.getTitleElement()} - - : - - } - {this._renderIcon()} - {Platform.OS === 'ios' && {this.setModalVisible(false);}} - > - - - - - - - {this.props.yearIndex}. Tried to set to max year but did not work using: this.state.index. also not able to use: this.state.index? this.getDateStr() : this.props.yearIndex // ISSUE: to set value based on min / max - however it does not update the selected date as there is no min/max date in Picker. - onValueChange={(year) => this.props.onDateChange(year)} - enabled = {this.props.isEnabled} // picker modal appears, but cannot select - don't like the interface, prefer to hide it as done above with check on view. - > - {Object.keys(years).map((year) => ( - - ))} - - - - - - - {cancelBtnText} - - - - - {confirmBtnText} - - - - - - - } - - - - ) } else { - return - - } - - } // END: render() -} // END: class DatePicker - -DatePicker.defaultProps = { - mode: 'date', - androidMode: 'default', - date: '', - // component height: 216(DatePickerIOS) + 1(borderTop) + 42(marginTop), IOS only - height: 259, - - // slide animation duration time, default to 300ms, IOS only - duration: 300, - confirmBtnText: '确定', - cancelBtnText: '取消', - iconSource: require('./date_icon.png'), - customStyles: {}, - - // whether or not show the icon - showIcon: false, // changed to hide icon. not able to pass with props. - disabled: false, - allowFontScaling: true, - hideText: false, - placeholder: '', - TouchableComponent: TouchableHighlight, - modalOnResponderTerminationRequest: e => true -}; - -DatePicker.propTypes = { - mode: PropTypes.oneOf(['date', 'datetime', 'time']), - androidMode: PropTypes.oneOf(['clock', 'calendar', 'spinner', 'default']), - date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date), PropTypes.object]), - format: PropTypes.string, - minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), - maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), - height: PropTypes.number, - duration: PropTypes.number, - confirmBtnText: PropTypes.string, - cancelBtnText: PropTypes.string, - iconSource: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), - iconComponent: PropTypes.element, - customStyles: PropTypes.object, - showIcon: PropTypes.bool, - disabled: PropTypes.bool, - allowFontScaling: PropTypes.bool, - onDateChange: PropTypes.func, - onOpenModal: PropTypes.func, - onCloseModal: PropTypes.func, - onPressMask: PropTypes.func, - placeholder: PropTypes.string, - modalOnResponderTerminationRequest: PropTypes.func, - is24Hour: PropTypes.bool, - getDateStr: PropTypes.func, - locale: PropTypes.string -}; - -export default DatePicker; From 034ed3d8584a21f743cd3d6add46db010bdbd565 Mon Sep 17 00:00:00 2001 From: Daniel Neu Date: Thu, 19 Mar 2020 13:11:17 -0400 Subject: [PATCH 08/15] Modifications to allow year only input Allow for selection of year only in picker, and setup package.json with name of the associated files. --- package.json | 80 ++++--- style.js | 22 +- year_picker.js | 622 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 689 insertions(+), 35 deletions(-) mode change 100644 => 100755 style.js create mode 100755 year_picker.js diff --git a/package.json b/package.json index 61c053779c..bcb024b01a 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,45 @@ { - "name": "react-native-datepicker", - "version": "1.7.2", - "description": "React Native DatePicker component for both Android and iOS, useing DatePickerAndroid, TimePickerAndroid and DatePickerIOS", - "main": "datepicker.js", - "scripts": { - "start": "node node_modules/react-native/local-cli/cli.js start", - "test": "jest --coverage", - "coverage": "cat ./coverage/lcov.info | coveralls", - "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", - "lint": "eslint ." - }, - "repository": { - "type": "git", - "url": "git+https://github.com/xgfe/react-native-datepicker.git" + "_from": "react-native-datepicker", + "_id": "react-native-datepicker@1.7.2", + "_inBundle": false, + "_integrity": "sha1-WNCCJZGgrJsyq6CCZQIioO4pZp0=", + "_location": "/react-native-datepicker", + "_phantomChildren": {}, + "_requested": { + "type": "tag", + "registry": true, + "raw": "react-native-yearpicker", + "name": "react-native-yearpicker", + "escapedName": "react-native-yearpicker", + "rawSpec": "", + "saveSpec": null, + "fetchSpec": "latest" }, - "keywords": [ - "react-native", - "DatePicker" + "_requiredBy": [ + "#USER", + "/" ], - "author": "xgfe", - "license": "MIT", + "_resolved": "https://registry.npmjs.org/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz", + "_shasum": "58d0822591a0ac9b32aba082650222a0ee29669d", + "_spec": "react-native-yearpicker", + "_where": "/Users/danielneu/work/teamraise", + "author": { + "name": "xgfe" + }, "bugs": { "url": "https://github.com/xgfe/react-native-datepicker/issues" }, - "homepage": "https://github.com/xgfe/react-native-datepicker#readme", + "bundleDependencies": false, + "config": { + "commitizen": { + "path": "./node_modules/cz-conventional-changelog" + } + }, "dependencies": { "moment": "^2.22.0" }, + "deprecated": false, + "description": "React Native Picker Modal to add Picker for iOS with a modifiication of DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS", "devDependencies": { "babel-core": "^6.5.2", "babel-eslint": "^7.2.3", @@ -48,11 +61,7 @@ "react-native": "0.49.3", "react-test-renderer": "16.0.0-beta.5" }, - "config": { - "commitizen": { - "path": "./node_modules/cz-conventional-changelog" - } - }, + "homepage": "https://github.com/xgfe/react-native-yearpicker#readme", "jest": { "preset": "react-native", "testPathIgnorePatterns": [ @@ -60,7 +69,26 @@ "tools/" ] }, + "keywords": [ + "react-native", + "DatePicker" + ], + "license": "MIT", + "main": "picker_modal.js", + "name": "react-native-yearpicker", "pre-commit": [ "lint" - ] + ], + "repository": { + "type": "git", + "url": "git+https://github.com/xgfe/react-native-datepicker.git" + }, + "scripts": { + "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", + "coverage": "cat ./coverage/lcov.info | coveralls", + "lint": "eslint .", + "start": "node node_modules/react-native/local-cli/cli.js start", + "test": "jest --coverage" + }, + "version": "1.7.2" } diff --git a/style.js b/style.js old mode 100644 new mode 100755 index 30d2cc6620..998f8629e2 --- a/style.js +++ b/style.js @@ -19,25 +19,29 @@ let style = StyleSheet.create({ dateInput: { flex: 1, height: 40, - borderWidth: 1, - borderColor: '#aaa', + borderBottomWidth: 1, + borderColor: '#ccc', alignItems: 'center', justifyContent: 'center' }, dateText: { - color: '#333' + color: '#333', + fontSize:36 }, placeholderText: { - color: '#c9c9c9' + color: '#C7C7CD', // was: #c9c9c9 + fontSize: 23, + + }, datePickerMask: { flex: 1, alignItems: 'flex-end', flexDirection: 'row', - backgroundColor: '#00000077' + backgroundColor: 'transparent'// was '#00000077' }, datePickerCon: { - backgroundColor: '#fff', + backgroundColor: '#ddd', // was: '#fff' height: 0, overflow: 'hidden' }, @@ -52,7 +56,7 @@ let style = StyleSheet.create({ }, btnTextText: { fontSize: 16, - color: '#46cf98' + color: '#000000'// was: '#46cf98' }, btnTextCancel: { color: '#666' @@ -65,8 +69,8 @@ let style = StyleSheet.create({ }, datePicker: { marginTop: 42, - borderTopColor: '#ccc', - borderTopWidth: 1 + borderTopColor: '#ccc', // was: #ccc + borderTopWidth: 1, }, disabled: { backgroundColor: '#eee' diff --git a/year_picker.js b/year_picker.js new file mode 100755 index 0000000000..a5efbdd12d --- /dev/null +++ b/year_picker.js @@ -0,0 +1,622 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import { + View, + Text, + Image, + Modal, + TouchableHighlight, + DatePickerAndroid, + TimePickerAndroid, + DatePickerIOS, + Picker, + Platform, + Animated, + Keyboard +} from 'react-native'; +import Style from './style'; +import Moment from 'moment'; + +import {years} from '../../../teamraise/app/lib/config'; + +const FORMATS = { + 'date': 'YYYY-MM-DD', + 'datetime': 'YYYY-MM-DD HH:mm', + 'time': 'HH:mm', + 'year': 'YYYY' +}; + +const PickerItem = Picker.Item; + +let date + + +const SUPPORTED_ORIENTATIONS = ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']; + +class DatePicker extends Component { + constructor(props) { + super(props); + + console.log ("picker_modal,js, constructor, props:", props) + + this.state = { + date: this.props.year, + modalVisible: false, + animatedHeight: new Animated.Value(0), + allowPointerEvents: true, + index: null, + dateInstance: 0, + isEnabled: this.props.isEnabled, + + // selectedValue= {this.state.index ? this.state.index : this.getDateStr(this.props.yearIndex) }// to display currently selected year -> {this.props.yearIndex} // @TODO: to set value based on min / max with this.state.index, however it does not update the selected date as there is no min/max date in Picker. + + }; + + this.getDate = this.getDate.bind(this); + this.getDateStr = this.getDateStr.bind(this); + this.datePicked = this.datePicked.bind(this); + this.onPressDate = this.onPressDate.bind(this); + this.onPressCancel = this.onPressCancel.bind(this); + this.onPressConfirm = this.onPressConfirm.bind(this); + this.onDateChange = this.onDateChange.bind(this); + this.onPressMask = this.onPressMask.bind(this); + this.onDatePicked = this.onDatePicked.bind(this); + this.onTimePicked = this.onTimePicked.bind(this); + this.onDatetimePicked = this.onDatetimePicked.bind(this); + this.onDatetimeTimePicked = this.onDatetimeTimePicked.bind(this); + this.setModalVisible = this.setModalVisible.bind(this); + + } + + componentWillReceiveProps(nextProps) { + + console.log ("picker_modal,js, componentWillReceiveProps, nextProps:", nextProps) + if (nextProps.date !== this.props.date) { + this.setState({date: this.getDate(nextProps.date)}); + } + + if (nextProps.yearIndex !== this.props.yearIndex) { + // this.setState({date: this.getDate(nextProps.date)}); + + console.log('IN HERE!!!!! componentWillReceiveProps, nextProps.yearIndex: ', nextProps.yearIndex) + } + + } + + setModalVisible(visible) { + const {height, duration} = this.props; + + // slide animation + if (visible) { + this.setState({modalVisible: visible}); + return Animated.timing( + this.state.animatedHeight, + { + toValue: height, + duration: duration + } + ).start(); + } else { + return Animated.timing( + this.state.animatedHeight, + { + toValue: 0, + duration: duration + } + ).start(() => { + this.setState({modalVisible: visible}); + }); + } + } + + onStartShouldSetResponder(e) { + return true; + } + + onMoveShouldSetResponder(e) { + return true; + } + + onPressMask() { + if (typeof this.props.onPressMask === 'function') { + this.props.onPressMask(); + } else { + this.onPressCancel(); + } + } + + onPressCancel() { + this.setModalVisible(false); + + if (typeof this.props.onCloseModal === 'function') { + this.props.onCloseModal(); + } + } + + onPressConfirm() { + this.datePicked(); + this.setModalVisible(false); + + if (typeof this.props.onCloseModal === 'function') { + this.props.onCloseModal(); + } + } + + // getDate(date = this.props.date) { + // const {mode, minDate, maxDate, format = FORMATS[mode]} = this.props; + + // // date默认值 + // if (!date) { + // let now = new Date(); + // if (minDate) { + // let _minDate = this.getDate(minDate); + + // if (now < _minDate) { + // return _minDate; + // } + // } + + // if (maxDate) { + // let _maxDate = this.getDate(maxDate); + + // if (now > _maxDate) { + // return _maxDate; + // } + // } + + // return now; + // } + + // if (date instanceof Date) { + // return date; + // } + + // return Moment(date, format).toDate(); + // } + + componentDidUpdate(prevProps, prevState) { + console.log ('picker_modal,js, componentDidUpdate(), props:', this.props) + + if (this.props.yearIndex!= prevProps.yearIndex ) { + + yearIndex = this.props.year + console.log ('picker_modal,js, componentDidUpdate(), this.props.year = yearIndex, yearIndex:', yearIndex) + } + + if (prevProps.isEnabled != this.props.isEnabled) { + this.setState( + { isEnabled: this.props.isEnabled} + ) + } + } + + getDate(date = this.props.year ) { // date = this.props.date, + const {mode, minDate, maxDate, format = FORMATS[mode]} = this.props; + let dateAfterTest = date; // setup as date and run test below + + // date默认值 + if (date) { + let now = new Date(); + now = now.getFullYear(); + + if (minDate) { + let _minDate = this.props.minDate; + + if (date < _minDate) { + // return _minDate; + + dateAfterTest = _minDate + } + } + + if (maxDate) { + let _maxDate = this.props.maxDate; + + if (date > _maxDate) { + // return _maxDate; + dateAfterTest = _maxDate; + } + } + + return dateAfterTest; + } + + // if (date instanceof Date) { + // return date; + // } + + return dateAfterTest; + } + + + getDateStr( date = this.props.year ) { + const { mode, format = FORMATS[mode]} = this.props; + console.log ('getDateStr(), this.props.yearIndex, ', this.props.yearIndex) + console.log ('getDateStr(), this.state.date, ', this.state.date) + + + let dateInstance = this.props.year < this.props.maxYear // changed date to this.props.year for currently selected year// = date instanceof Date + ? this.props.year + : this.props.maxYear + + + + let index = years.findIndex(p => p.year == dateInstance) + + // if (typeof this.props.getDateStr === 'function') { + // return this.props.getDateStr(dateInstance); + // } + + this.setState({ + index, + dateInstance, + + }, () => { + console.log ('getDateStr(), this.state.index, ', this.state.index) + console.log ('getDateStr(), this.state.index, ', this.state.dateInstance) + // return this.state.dateInstance + + }) + + + + + + } + + datePicked() { + if (typeof this.props.onDateChange === 'function') { + this.props.onDateChange(this.getDateStr(this.state.date), this.state.date) // Need to return the index number for Years array// to display the selected year -> ( this.props.yearIndex); //@TODO: to limit date min / max need pass to try this and fix it: this.props.onDateChange( this.getDateStr(this.state.date)); + } + } + + getTitleElement() { + const {date, placeholder, customStyles, allowFontScaling} = this.props; + + if (!date && placeholder) { + return ( + + {placeholder} + + ); + } + return ( + + {this.props.year} { /* // to display smaller of selected year or maxYear {this.state.dateInstance ? this.state.dateInstance: this.getDateStr(this.props.year) */} { /* // -> to display the currently selected year: {this.props.year} */}{/* {this.getDateStr()} // to get the max/min allowable date, however it does not update the picker, need to change the onSelectValue = this.state.index*/} + + ); + } + + onDateChange(date) { + console.log ('picker_modal.js, onDateChange(), date: ', date) + this.setState({ + allowPointerEvents: false, + date: date + }); + const timeoutId = setTimeout(() => { + this.setState({ + allowPointerEvents: true + }); + clearTimeout(timeoutId); + }, 200); + } + + onDatePicked({action, year, month, day}) { + if (action !== DatePickerAndroid.dismissedAction) { + this.setState({ + date: new Date(year, month, day) + }); + this.datePicked(); + } else { + this.onPressCancel(); + } + } + + onTimePicked({action, hour, minute}) { + if (action !== DatePickerAndroid.dismissedAction) { + this.setState({ + date: Moment().hour(hour).minute(minute).toDate() + }); + this.datePicked(); + } else { + this.onPressCancel(); + } + } + + onDatetimePicked({action, year, month, day}) { + const {mode, androidMode, format = FORMATS[mode], is24Hour = !format.match(/h|a/)} = this.props; + + if (action !== DatePickerAndroid.dismissedAction) { + let timeMoment = Moment(this.state.date); + + TimePickerAndroid.open({ + hour: timeMoment.hour(), + minute: timeMoment.minutes(), + is24Hour: is24Hour, + mode: androidMode + }).then(this.onDatetimeTimePicked.bind(this, year, month, day)); + } else { + this.onPressCancel(); + } + } + + onDatetimeTimePicked(year, month, day, {action, hour, minute}) { + if (action !== DatePickerAndroid.dismissedAction) { + this.setState({ + date: new Date(year, month, day, hour, minute) + }); + this.datePicked(); + } else { + this.onPressCancel(); + } + } + + + onPressDate() { + if (this.props.disabled) { + return true; + } + + Keyboard.dismiss(); + + // reset state + this.setState({ + date: this.getDate() + }); + + if (Platform.OS === 'ios') { + this.setModalVisible(true); + } else { + + const {mode, androidMode, format = FORMATS[mode], minDate, maxDate, is24Hour = !format.match(/h|a/)} = this.props; + + // 选日期 + if (mode === 'date') { + DatePickerAndroid.open({ + date: this.state.date, + minDate: minDate && this.getDate(minDate), + maxDate: maxDate && this.getDate(maxDate), + mode: androidMode + }).then(this.onDatePicked); + } else if (mode === 'time') { + // 选时间 + + let timeMoment = Moment(this.state.date); + + TimePickerAndroid.open({ + hour: timeMoment.hour(), + minute: timeMoment.minutes(), + is24Hour: is24Hour, + mode: androidMode + }).then(this.onTimePicked); + } else if (mode === 'datetime') { + // 选日期和时间 + + DatePickerAndroid.open({ + date: this.state.date, + minDate: minDate && this.getDate(minDate), + maxDate: maxDate && this.getDate(maxDate), + mode: androidMode + }).then(this.onDatetimePicked); + } + } + + if (typeof this.props.onOpenModal === 'function') { + this.props.onOpenModal(); + } + } + + _renderIcon() { + const { + showIcon, + iconSource, + iconComponent, + customStyles + } = this.props; + + if (showIcon) { + if (iconComponent) { + return iconComponent; + } + return ( + + ); + } + + return null; + } + + render() { + const { + mode, + style, + customStyles, + disabled, + minDate, + maxDate, + minuteInterval, + timeZoneOffsetInMinutes, + cancelBtnText, + confirmBtnText, + TouchableComponent, + testID, + cancelBtnTestID, + confirmBtnTestID, + allowFontScaling, + locale + } = this.props; + + const dateInputStyle = [ + Style.dateInput, customStyles.dateInput, + disabled && Style.disabled, + disabled && customStyles.disabled + ]; + + if (this.props.isEnabled) { + return ( + + + + + { + !this.props.hideText ? + + {this.getTitleElement()} + + : + + } + {this._renderIcon()} + {Platform.OS === 'ios' && {this.setModalVisible(false);}} + > + + + + + + + {this.props.yearIndex}. Tried to set to max year but did not work using: this.state.index. also not able to use: this.state.index? this.getDateStr() : this.props.yearIndex // ISSUE: to set value based on min / max - however it does not update the selected date as there is no min/max date in Picker. + onValueChange={(year) => this.props.onDateChange(year)} + enabled = {this.props.isEnabled} // picker modal appears, but cannot select - don't like the interface, prefer to hide it as done above with check on view. + > + {Object.keys(years).map((year) => ( + + ))} + + + + + + + {cancelBtnText} + + + + + {confirmBtnText} + + + + + + + } + + + + ) } else { + return + + } + + } // END: render() +} // END: class DatePicker + +DatePicker.defaultProps = { + mode: 'date', + androidMode: 'default', + date: '', + // component height: 216(DatePickerIOS) + 1(borderTop) + 42(marginTop), IOS only + height: 259, + + // slide animation duration time, default to 300ms, IOS only + duration: 300, + confirmBtnText: '确定', + cancelBtnText: '取消', + iconSource: require('./date_icon.png'), + customStyles: {}, + + // whether or not show the icon + showIcon: false, // changed to hide icon. not able to pass with props. + disabled: false, + allowFontScaling: true, + hideText: false, + placeholder: '', + TouchableComponent: TouchableHighlight, + modalOnResponderTerminationRequest: e => true +}; + +DatePicker.propTypes = { + mode: PropTypes.oneOf(['date', 'datetime', 'time']), + androidMode: PropTypes.oneOf(['clock', 'calendar', 'spinner', 'default']), + date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date), PropTypes.object]), + format: PropTypes.string, + minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), + maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]), + height: PropTypes.number, + duration: PropTypes.number, + confirmBtnText: PropTypes.string, + cancelBtnText: PropTypes.string, + iconSource: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), + iconComponent: PropTypes.element, + customStyles: PropTypes.object, + showIcon: PropTypes.bool, + disabled: PropTypes.bool, + allowFontScaling: PropTypes.bool, + onDateChange: PropTypes.func, + onOpenModal: PropTypes.func, + onCloseModal: PropTypes.func, + onPressMask: PropTypes.func, + placeholder: PropTypes.string, + modalOnResponderTerminationRequest: PropTypes.func, + is24Hour: PropTypes.bool, + getDateStr: PropTypes.func, + locale: PropTypes.string +}; + +export default DatePicker; From 259a0d5ecebc61e4cab99c7755dfa50d94d335d0 Mon Sep 17 00:00:00 2001 From: Daniel Neu Date: Thu, 19 Mar 2020 14:21:37 -0400 Subject: [PATCH 09/15] update to npmpublish.yml --- .github/workflows/npmpublish.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/npmpublish.yml b/.github/workflows/npmpublish.yml index 81cbddb750..b9ccaa7c8e 100644 --- a/.github/workflows/npmpublish.yml +++ b/.github/workflows/npmpublish.yml @@ -30,7 +30,7 @@ jobs: - run: npm ci - run: npm publish env: - NODE_AUTH_TOKEN: ${{secrets.npm_token}} + NODE_AUTH_TOKEN: ${{\m5oVA6Gb{L}kbA4d5-;}} publish-gpr: needs: build @@ -41,8 +41,8 @@ jobs: with: node-version: 12 registry-url: https://npm.pkg.github.com/ - scope: '@your-github-username' + scope: '@danneu2s1fa' - run: npm ci - run: npm publish env: - NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} + NODE_AUTH_TOKEN: ${{\m5oVA6Gb{L}kbA4d5-;}} From ae85dc3bc72903e5eb0377dabf44874c5ae480eb Mon Sep 17 00:00:00 2001 From: Daniel Neu Date: Thu, 19 Mar 2020 14:32:44 -0400 Subject: [PATCH 10/15] Revert "update to npmpublish.yml" This reverts commit 259a0d5ecebc61e4cab99c7755dfa50d94d335d0. --- .github/workflows/npmpublish.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/npmpublish.yml b/.github/workflows/npmpublish.yml index b9ccaa7c8e..81cbddb750 100644 --- a/.github/workflows/npmpublish.yml +++ b/.github/workflows/npmpublish.yml @@ -30,7 +30,7 @@ jobs: - run: npm ci - run: npm publish env: - NODE_AUTH_TOKEN: ${{\m5oVA6Gb{L}kbA4d5-;}} + NODE_AUTH_TOKEN: ${{secrets.npm_token}} publish-gpr: needs: build @@ -41,8 +41,8 @@ jobs: with: node-version: 12 registry-url: https://npm.pkg.github.com/ - scope: '@danneu2s1fa' + scope: '@your-github-username' - run: npm ci - run: npm publish env: - NODE_AUTH_TOKEN: ${{\m5oVA6Gb{L}kbA4d5-;}} + NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} From b6841e6ccc3d5d306ddbc4d4e79d325fa0c18e3e Mon Sep 17 00:00:00 2001 From: Daniel Neu Date: Thu, 19 Mar 2020 15:03:53 -0400 Subject: [PATCH 11/15] Delete npmpublish.yml --- .github/workflows/npmpublish.yml | 48 -------------------------------- 1 file changed, 48 deletions(-) delete mode 100644 .github/workflows/npmpublish.yml diff --git a/.github/workflows/npmpublish.yml b/.github/workflows/npmpublish.yml deleted file mode 100644 index 81cbddb750..0000000000 --- a/.github/workflows/npmpublish.yml +++ /dev/null @@ -1,48 +0,0 @@ -# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created -# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages - -name: Node.js Package - -on: - release: - types: [created] - -jobs: - build: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v1 - with: - node-version: 12 - - run: npm ci - - run: npm test - - publish-npm: - needs: build - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v1 - with: - node-version: 12 - registry-url: https://registry.npmjs.org/ - - run: npm ci - - run: npm publish - env: - NODE_AUTH_TOKEN: ${{secrets.npm_token}} - - publish-gpr: - needs: build - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v1 - with: - node-version: 12 - registry-url: https://npm.pkg.github.com/ - scope: '@your-github-username' - - run: npm ci - - run: npm publish - env: - NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} From 9a7a990dcdb03387c0c72cc9a460e9580e92a729 Mon Sep 17 00:00:00 2001 From: Daniel Neu Date: Thu, 19 Mar 2020 19:09:38 -0400 Subject: [PATCH 12/15] fixed filename --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bcb024b01a..6bc848cbb2 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "DatePicker" ], "license": "MIT", - "main": "picker_modal.js", + "main": "year_picker.js", "name": "react-native-yearpicker", "pre-commit": [ "lint" From 5a7b7d28ec0a0571a2d2e9f091bc27951783f7b8 Mon Sep 17 00:00:00 2001 From: Daniel Neu Date: Thu, 19 Mar 2020 19:40:10 -0400 Subject: [PATCH 13/15] update to package.json --- package.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 6bc848cbb2..f625474e9c 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { - "_from": "react-native-datepicker", - "_id": "react-native-datepicker@1.7.2", + "_from": "react-native-yearpicker", + "_id": "react-native-yearpicker@1.7.3", "_inBundle": false, "_integrity": "sha1-WNCCJZGgrJsyq6CCZQIioO4pZp0=", - "_location": "/react-native-datepicker", + "_location": "/react-native-yearpicker", "_phantomChildren": {}, "_requested": { "type": "tag", @@ -19,15 +19,15 @@ "#USER", "/" ], - "_resolved": "https://registry.npmjs.org/react-native-datepicker/-/react-native-datepicker-1.7.2.tgz", + "_resolved": "https://registry.npmjs.org/react-native-yearpicker/-/react-native-yearpicker-1.7.3.tgz", "_shasum": "58d0822591a0ac9b32aba082650222a0ee29669d", "_spec": "react-native-yearpicker", "_where": "/Users/danielneu/work/teamraise", "author": { - "name": "xgfe" + "name": "danneu2s1fa" }, "bugs": { - "url": "https://github.com/xgfe/react-native-datepicker/issues" + "url": "https://github.com/danneu2s1fa/react-native-yearpicker/issues" }, "bundleDependencies": false, "config": { @@ -39,7 +39,7 @@ "moment": "^2.22.0" }, "deprecated": false, - "description": "React Native Picker Modal to add Picker for iOS with a modifiication of DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS", + "description": "React Native Picker Modal to add Picker for iOS with a modifiication of DatePicker component for iOS using DatePickerIOS", "devDependencies": { "babel-core": "^6.5.2", "babel-eslint": "^7.2.3", @@ -61,7 +61,7 @@ "react-native": "0.49.3", "react-test-renderer": "16.0.0-beta.5" }, - "homepage": "https://github.com/xgfe/react-native-yearpicker#readme", + "homepage": "https://github.com/danneu2s1fa/react-native-yearpicker#readme", "jest": { "preset": "react-native", "testPathIgnorePatterns": [ @@ -71,7 +71,7 @@ }, "keywords": [ "react-native", - "DatePicker" + "YearPicker" ], "license": "MIT", "main": "year_picker.js", @@ -81,7 +81,7 @@ ], "repository": { "type": "git", - "url": "git+https://github.com/xgfe/react-native-datepicker.git" + "url": "git+https://github.com/danneu2s1fa/react-native-yearpicker.git" }, "scripts": { "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", From 3a60627b6e9bb9fabb9dc45ada267d9f97d91c42 Mon Sep 17 00:00:00 2001 From: Daniel Neu Date: Thu, 19 Mar 2020 20:24:33 -0400 Subject: [PATCH 14/15] Update year_picker.js --- year_picker.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/year_picker.js b/year_picker.js index a5efbdd12d..9faa5a2dd2 100755 --- a/year_picker.js +++ b/year_picker.js @@ -17,7 +17,7 @@ import { import Style from './style'; import Moment from 'moment'; -import {years} from '../../../teamraise/app/lib/config'; +import {years} from '../../../app/lib/config'; const FORMATS = { 'date': 'YYYY-MM-DD', @@ -488,7 +488,7 @@ class DatePicker extends Component { Date: Fri, 20 Mar 2020 10:37:44 -0400 Subject: [PATCH 15/15] Update package.json updated version number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f625474e9c..5a711fbed8 100644 --- a/package.json +++ b/package.json @@ -90,5 +90,5 @@ "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest --coverage" }, - "version": "1.7.2" + "version": "1.7.3" }