index.ios.js

import React from 'react'
import {
  AppRegistry,
  StyleSheet,
  Button as ButtonN,
  Text as TextN,
  TextInput as TextInputN,
  View as ViewN
} from 'react-native'

import {fromClass} from "karet"
import * as U      from "karet.util"
import * as L      from "partial.lenses"

import Undo from "atom.undo"

const Button    = fromClass(ButtonN)
const Text      = fromClass(TextN)
const TextInput = fromClass(TextInputN)
const View      = fromClass(ViewN)

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  column: {
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "flex-start"
  },
  row: {
    height: 50,
    alignItems: "center",
    flexDirection: "row",
    justifyContent: "flex-start"
  },
  input: {
    height: 40,
    width: 100,
    margin: 5,
    borderColor: "gray",
    borderWidth: 1
  },
  text: {
    height: 20,
    fontSize: 20,
    margin: 5,
    textAlign: 'center'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  }
})

const TextField = ({value}) =>
  <TextInput style={styles.input}
             value={value}
             onChangeText={t => value.set(t)}/>

const Contact = ({contact}) =>
  <View style={styles.row}>
    <TextField value={U.view("name", contact)}/>
    <TextField value={U.view("phone", contact)}/>
    <Button title="Remove"
            onPress={() => contact.remove()}/>
  </View>

const Contacts = ({contacts}) =>
  <View style={styles.column}>
    {U.seq(contacts, U.mapElems((contact, i) =>
           <Contact key={i} contact={contact}/>))}
  </View>

const state = Undo({value: undefined, Atom: U.atom})
state.log()

const AwesomeProject = ({contacts = U.view(L.define([]), state)}) =>
  <View style={styles.container}>
    <Text style={styles.text}>Demo</Text>
    <Button title="Add"
            onPress={() => contacts.modify(U.append({name: "", phone: ""}))}/>
    <Contacts contacts={contacts}/>
    <Text style={styles.text}>
      Count {U.length(contacts)}
    </Text>
  </View>

export default AwesomeProject

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject)