diff --git a/README.md b/README.md index 4d48999..b4a5e7b 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,9 @@ const App = () => { responseFormat="YYYY-MM-DD" maxDate={moment()} minDate={moment().subtract(100, "days")} - selectedDateContainerStyle={styles.selectedDateContainerStyle} + selectedDateContainerStyle={ + styles.selectedDateContainerStyle + } selectedDateStyle={styles.selectedDateStyle} /> @@ -119,6 +121,9 @@ export default App; | **`font`** | `String` | `Optional` | Name of the font you are using in your theme | | **`selectedDateContainerStyle`** | `Style` | `Optional` | Style of the selected date container | | **`selectedDateStyle`** | `Style` | `Optional` | Style of the selected date | +| **`titleContainerStyle`** | `Style` | `Optional` | Style of the title container | +| **`titleStyle`** | `Style` | `Optional` | Style of the title | +| **`iconColor`** | `String` | `Optional` | The color to be used in calendar icons | | **`ln`** | `string` | `Optional` | Two letter locales string that is supported by the Moment library | | **`onConfirm`** | `Method` | `Optional` | This function will be executed if confirm button pressed | | **`onClear`** | `Method` | `Optional` | This function will be executed if clear button pressed | diff --git a/example/App.tsx b/example/App.tsx index 19d16db..5e00610 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -18,6 +18,7 @@ const App = () => { minDate={moment().subtract(100, 'days')} selectedDateContainerStyle={styles.selectedDateContainerStyle} selectedDateStyle={styles.selectedDateStyle} + iconColor="red" /> first date: {selectedRange.firstDate} @@ -43,6 +44,12 @@ const styles = StyleSheet.create({ fontWeight: 'bold', color: 'white', }, + titleStyle: { + color: 'white' + }, + titleContainerStyle: { + backgroundColor: 'blue' + } }); export default App; diff --git a/example/package.json b/example/package.json index e0be18c..8ba0ca4 100644 --- a/example/package.json +++ b/example/package.json @@ -13,7 +13,7 @@ "moment": "^2.29.1", "react": "17.0.1", "react-native": "0.64.2", - "rn-select-date-range": "file:../rn-select-date-range-1.3.2.tgz" + "rn-select-date-range": "file:../rn-select-date-range-5.0.0.tgz" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/example/yarn.lock b/example/yarn.lock index f619475..1497535 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -5547,10 +5547,9 @@ rimraf@~2.2.6: resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582" integrity sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI= -rn-select-date-range@^1.1.1: - version "1.3.0" - resolved "https://registry.yarnpkg.com/rn-select-date-range/-/rn-select-date-range-1.3.0.tgz#47994d379eb81e60353f130e1c906b7051af64cb" - integrity sha512-UQTvq/3eER+mupssjDnsVs8qkqLYQu5AEFSRK/BnlriPSCDZqL+z8SJ5O+3rOJ+BE/huDTfMreS/FlE4WFVAWA== +"rn-select-date-range@file:../rn-select-date-range-5.0.0.tgz": + version "5.0.0" + resolved "file:../rn-select-date-range-5.0.0.tgz#dd597915eba72d53b27b64bf4316563b7d3cf8ed" dependencies: moment "^2.29.1" diff --git a/package.json b/package.json index bf801ec..146afd7 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "build": "yarn build:esm && yarn build:cjs", "build:esm": "tsc", "build:cjs": "tsc --module commonjs --outDir lib/cjs", - "publish": "yarn build && npm publish --access public" + "publish": "yarn build && npm publish --access public", + "tarball": "yarn build && npm pack" }, "repository": { "type": "git", diff --git a/src/Button.tsx b/src/Button.tsx index 02fc673..54e6d5d 100644 --- a/src/Button.tsx +++ b/src/Button.tsx @@ -7,6 +7,7 @@ interface IProps { align?: "center" | "auto" | "left" | "right" | "justify" | undefined; disabled: boolean; font?: string; + iconColor?: string; } export default ({ @@ -15,11 +16,13 @@ export default ({ align, disabled = false, font, + iconColor, }: IProps) => { const textStyle = { textAlign: align, opacity: disabled ? 0.2 : 1, fontFamily: font, + color: iconColor, }; return ( diff --git a/src/DateRangePicker.tsx b/src/DateRangePicker.tsx index 944be8f..fbb4bdd 100644 --- a/src/DateRangePicker.tsx +++ b/src/DateRangePicker.tsx @@ -25,12 +25,15 @@ interface IProps { blockSingleDateSelection?: boolean; font?: string; selectedDateContainerStyle?: ViewStyle; + titleContainerStyle?: ViewStyle; selectedDateStyle?: TextStyle; + titleStyle?: TextStyle; ln?: string; onConfirm?: () => void; - onClear?:() => void; + onClear?: () => void; clearBtnTitle?: string; confirmBtnTitle?: string; + iconColor?: string; } const DateRangePicker = ({ @@ -42,11 +45,14 @@ const DateRangePicker = ({ font, selectedDateContainerStyle, selectedDateStyle, + titleContainerStyle, + titleStyle, ln = "en", onConfirm, onClear, clearBtnTitle = "Clear", - confirmBtnTitle = "OK" + confirmBtnTitle = "OK", + iconColor, }: IProps) => { const [selectedDate, setSelectedDate] = useState(moment()); @@ -118,20 +124,21 @@ const DateRangePicker = ({ if (onConfirm) { onConfirm(); } - } + }; const isDateSelected = () => firstDate === null || secondDate === null; return ( - +