commit e36e86a142a03f8ad1c425215db8eaa40fe01702
parent 0cdabea91c650d87b23de1c00574f54790cf5ff8
Author: Johan Lindskogen <johan.lindskogen@gmail.com>
Date: Sun, 1 Apr 2018 12:26:22 +0200
Convert to typescript
Diffstat:
9 files changed, 240 insertions(+), 201 deletions(-)
diff --git a/src/store/buffers.ts b/src/store/buffers.ts
@@ -1,4 +1,4 @@
-type BufferState = { [key: string]: WeechatBuffer };
+export type BufferState = { [key: string]: WeechatBuffer };
const initialState: BufferState = {};
diff --git a/src/store/index.js b/src/store/index.js
@@ -1,26 +0,0 @@
-import { combineReducers, createStore, applyMiddleware } from "redux";
-
-import buffers from "./buffers";
-import lines from "./lines";
-
-const app = (state = { connected: false }, action) => {
- switch (action.type) {
- case "FETCH_VERSION":
- return {
- connected: true
- };
- default:
- return state;
- }
-};
-
-const reducer = combineReducers({
- app,
- buffers,
- lines
-});
-
-export default createStore(
- reducer,
- window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -0,0 +1,37 @@
+import { combineReducers, createStore, applyMiddleware } from "redux";
+
+import buffers, { BufferState } from "./buffers";
+import lines, { LineState } from "./lines";
+
+type AppState = {
+ connected: boolean;
+};
+
+export type StoreState = {
+ app: AppState;
+ buffers: BufferState;
+ lines: LineState;
+};
+
+const app = (state: AppState = { connected: false }, action) => {
+ switch (action.type) {
+ case "FETCH_VERSION":
+ return {
+ connected: true
+ };
+ default:
+ return state;
+ }
+};
+
+const reducer = combineReducers({
+ app,
+ buffers,
+ lines
+});
+
+export default createStore(
+ reducer,
+ (<any>window).__REDUX_DEVTOOLS_EXTENSION__ &&
+ (<any>window).__REDUX_DEVTOOLS_EXTENSION__()
+);
diff --git a/src/store/lines.ts b/src/store/lines.ts
@@ -1,8 +1,8 @@
-type LinesState = { [key: string]: WeechatLine };
+export type LineState = { [key: string]: WeechatLine };
-const initialState: LinesState = {};
+const initialState: LineState = {};
-export default (state: LinesState = initialState, action): LinesState => {
+export default (state: LineState = initialState, action): LineState => {
switch (action.type) {
case "FETCH_LINES":
return {
diff --git a/src/usecase/ConnectionGate.js b/src/usecase/ConnectionGate.js
@@ -1,14 +0,0 @@
-import { connect } from "react-redux";
-
-const ConnectionGate = props => {
- console.log("connection gate", props.connected);
- if (props.connected) {
- return props.children;
- } else {
- return null;
- }
-};
-
-export default connect(state => ({
- connected: state.app.connected
-}))(ConnectionGate);
diff --git a/src/usecase/ConnectionGate.ts b/src/usecase/ConnectionGate.ts
@@ -0,0 +1,19 @@
+import { connect } from "react-redux";
+
+interface Props {
+ connected: boolean;
+ children: React.ReactChild;
+}
+
+const ConnectionGate = (props: Props) => {
+ console.log("connection gate", props.connected);
+ if (props.connected) {
+ return props.children;
+ } else {
+ return null;
+ }
+};
+
+export default connect(state => ({
+ connected: state.app.connected
+}))(ConnectionGate);
diff --git a/src/usecase/buffers/ui/Buffer.tsx b/src/usecase/buffers/ui/Buffer.tsx
@@ -13,6 +13,7 @@ import * as _ from "lodash";
import AppleEasing from "react-apple-easing";
import BufferLine from "./BufferLine";
+import { StoreState } from "../../../store";
//const easingFunction = Easing.bezier(0.55, 0.085, 0.68, 0.53);
const easingFunction = AppleEasing.easeIn;
@@ -21,13 +22,18 @@ interface Props {
lines: WeechatLine[];
onLongPress: () => any;
parseArgs: any;
+ bufferId: string;
}
-class Buffer extends React.Component<Props> {
+interface State {
+ keyboardOffset: Animated.Value;
+}
+
+class Buffer extends React.Component<Props, State> {
cancelKeyboardWillShow: EmitterSubscription;
cancelKeyboardWillHide: EmitterSubscription;
- state = {
+ state: State = {
keyboardOffset: new Animated.Value(0)
};
@@ -74,7 +80,7 @@ class Buffer extends React.Component<Props> {
}
}
-export default connect((state, { bufferId }) => ({
+export default connect((state: StoreState, { bufferId }: Props) => ({
lines: state.lines[bufferId] || []
}))(Buffer);
diff --git a/src/usecase/buffers/ui/BufferView.js b/src/usecase/buffers/ui/BufferView.js
@@ -1,154 +0,0 @@
-import React from "react";
-import {
- StyleSheet,
- AlertIOS,
- LinkingIOS,
- ActionSheetIOS,
- Animated,
- Keyboard,
- TextInput,
- Easing,
- View
-} from "react-native";
-import AppleEasing from "react-apple-easing";
-
-import { connect } from "react-redux";
-
-import { changeCurrentBuffer } from "../actions/BufferActions";
-
-import BufferLine from "./BufferLine";
-import Buffer from "./Buffer";
-import { getParseArgs } from "../../../lib/helpers/parse-text-args";
-import { formatUrl } from "../../../lib/helpers/url-formatter";
-
-const easingFunction = Easing.bezier(0.55, 0.085, 0.68, 0.53);
-//const easingFunction = AppleEasing.easeIn;
-
-export default class BufferView extends React.Component {
- state = {
- keyboardOffset: new Animated.Value(0),
- inputWidth: new Animated.Value(350)
- };
- componentDidMount() {
- this.cancelKeyboardWillShow = Keyboard.addListener("keyboardWillShow", e =>
- this._keyboardWillShow(e)
- );
- this.cancelKeyboardWillHide = Keyboard.addListener("keyboardWillHide", e =>
- this._keyboardWillHide(e)
- );
- }
- _keyboardWillShow(e) {
- console.log(e);
- Animated.timing(this.state.keyboardOffset, {
- toValue: e.endCoordinates.height,
- duration: e.duration,
- easing: easingFunction
- }).start();
- }
- _keyboardWillHide(e) {
- Animated.timing(this.state.keyboardOffset, {
- toValue: 0,
- duration: e.duration,
- easing: easingFunction
- }).start();
- }
- handleOnFocus() {
- Animated.timing(this.state.inputWidth, {
- toValue: 310,
- duration: 250,
- easing: easingFunction
- }).start();
- }
- handleOnBlur() {
- Animated.timing(this.state.inputWidth, {
- toValue: 350,
- duration: 250,
- easing: Easing.inOut(Easing.ease)
- }).start();
- }
- handleOnLongPress(type, text) {
- ActionSheetIOS.showShareActionSheetWithOptions(
- {
- url: formatUrl(type, text),
- message: text
- },
- () => null,
- () => null
- );
- }
- handleOnPress(type, text) {
- // console.log(type, text);
- // if (type === "channel") {
- // this.props.dispatch(changeCurrentBuffer(text));
- // } else {
- // LinkingIOS.openURL(formatUrl(type, text));
- // }
- }
- render() {
- const { bufferId } = this.props;
-
- console.log({ bufferId });
-
- if (!bufferId) {
- return <View style={styles.container} />;
- }
-
- return (
- <Animated.View
- style={[styles.container, { marginBottom: this.state.keyboardOffset }]}
- >
- <Buffer
- bufferId={bufferId}
- onLongPress={line => null}
- parseArgs={getParseArgs(
- styles.link,
- this.handleOnPress,
- this.handleOnLongPress
- )}
- />
- <View style={styles.bottomBox}>
- <Animated.View style={{ width: this.state.inputWidth }}>
- <TextInput
- style={styles.inputBox}
- onFocus={() => this.handleOnFocus()}
- onBlur={() => this.handleOnBlur()}
- />
- </Animated.View>
- </View>
- </Animated.View>
- );
- }
-}
-
-const light = false;
-
-const styles = StyleSheet.create({
- topbar: {
- height: 20,
- paddingHorizontal: 5,
- backgroundColor: "#001"
- },
- text: {
- color: "#eee"
- },
- container: {
- flex: 1,
- backgroundColor: light ? "#fff" : "#222"
- },
- main: {
- paddingVertical: 20
- },
- bottomBox: {
- height: 40,
- paddingHorizontal: 10,
- justifyContent: "center",
- backgroundColor: "#aaa"
- },
- inputBox: {
- height: 25,
- paddingHorizontal: 5,
- justifyContent: "center",
- borderColor: "gray",
- backgroundColor: "#fff"
- }
-});
diff --git a/src/usecase/buffers/ui/BufferView.tsx b/src/usecase/buffers/ui/BufferView.tsx
@@ -0,0 +1,171 @@
+import React from "react";
+import {
+ StyleSheet,
+ AlertIOS,
+ LinkingIOS,
+ ActionSheetIOS,
+ Animated,
+ Keyboard,
+ TextInput,
+ Easing,
+ View,
+ EmitterSubscription
+} from "react-native";
+import AppleEasing from "react-apple-easing";
+
+import { connect } from "react-redux";
+
+import { changeCurrentBuffer } from "../actions/BufferActions";
+
+import BufferLine from "./BufferLine";
+import Buffer from "./Buffer";
+import { getParseArgs } from "../../../lib/helpers/parse-text-args";
+import { formatUrl } from "../../../lib/helpers/url-formatter";
+
+const easingFunction = Easing.bezier(0.55, 0.085, 0.68, 0.53);
+//const easingFunction = AppleEasing.easeIn;
+
+interface Props {
+ bufferId: string;
+}
+
+interface State {
+ keyboardOffset: Animated.Value;
+ inputWidth: Animated.Value;
+}
+
+export default class BufferView extends React.Component<Props, State> {
+ cancelKeyboardWillShow: EmitterSubscription;
+ cancelKeyboardWillHide: EmitterSubscription;
+
+ state = {
+ keyboardOffset: new Animated.Value(0),
+ inputWidth: new Animated.Value(350)
+ };
+
+ componentDidMount() {
+ this.cancelKeyboardWillShow = Keyboard.addListener("keyboardWillShow", e =>
+ this._keyboardWillShow(e)
+ );
+ this.cancelKeyboardWillHide = Keyboard.addListener("keyboardWillHide", e =>
+ this._keyboardWillHide(e)
+ );
+ }
+ _keyboardWillShow(e) {
+ console.log(e);
+ Animated.timing(this.state.keyboardOffset, {
+ toValue: e.endCoordinates.height,
+ duration: e.duration,
+ easing: easingFunction
+ }).start();
+ }
+ _keyboardWillHide(e) {
+ Animated.timing(this.state.keyboardOffset, {
+ toValue: 0,
+ duration: e.duration,
+ easing: easingFunction
+ }).start();
+ }
+ handleOnFocus() {
+ Animated.timing(this.state.inputWidth, {
+ toValue: 310,
+ duration: 250,
+ easing: easingFunction
+ }).start();
+ }
+ handleOnBlur() {
+ Animated.timing(this.state.inputWidth, {
+ toValue: 350,
+ duration: 250,
+ easing: Easing.inOut(Easing.ease)
+ }).start();
+ }
+ handleOnLongPress(type, text) {
+ ActionSheetIOS.showShareActionSheetWithOptions(
+ {
+ url: formatUrl(type, text),
+ message: text
+ },
+ () => null,
+ () => null
+ );
+ }
+ handleOnPress(type, text) {
+ // console.log(type, text);
+ // if (type === "channel") {
+ // this.props.dispatch(changeCurrentBuffer(text));
+ // } else {
+ // LinkingIOS.openURL(formatUrl(type, text));
+ // }
+ }
+ render() {
+ const { bufferId } = this.props;
+
+ console.log({ bufferId });
+
+ if (!bufferId) {
+ return <View style={styles.container} />;
+ }
+
+ return (
+ <Animated.View
+ style={[styles.container, { marginBottom: this.state.keyboardOffset }]}
+ >
+ <Buffer
+ bufferId={bufferId}
+ onLongPress={line => null}
+ parseArgs={getParseArgs(
+ styles.link,
+ this.handleOnPress,
+ this.handleOnLongPress
+ )}
+ />
+ <View style={styles.bottomBox}>
+ <Animated.View style={{ width: this.state.inputWidth }}>
+ <TextInput
+ style={styles.inputBox}
+ onFocus={() => this.handleOnFocus()}
+ onBlur={() => this.handleOnBlur()}
+ />
+ </Animated.View>
+ </View>
+ </Animated.View>
+ );
+ }
+}
+
+const light = false;
+
+const styles = StyleSheet.create({
+ topbar: {
+ height: 20,
+ paddingHorizontal: 5,
+ backgroundColor: "#001"
+ },
+ link: {
+ textDecorationLine: "underline"
+ },
+ text: {
+ color: "#eee"
+ },
+ container: {
+ flex: 1,
+ backgroundColor: light ? "#fff" : "#222"
+ },
+ main: {
+ paddingVertical: 20
+ },
+ bottomBox: {
+ height: 40,
+ paddingHorizontal: 10,
+ justifyContent: "center",
+ backgroundColor: "#aaa"
+ },
+ inputBox: {
+ height: 25,
+ paddingHorizontal: 5,
+ justifyContent: "center",
+ borderColor: "gray",
+ backgroundColor: "#fff"
+ }
+});
