Added storage view, and updated the UI in general

2026-02-08 00:36:26 +01:00 · 2018-08-21 07:10:22 +02:00
parent 41570fb15e
commit 5a10498da7
29 changed files with 472 additions and 24 deletions
--- a/lib/src/components/DevTool/Storage/Keys.js
+++ b/lib/src/components/DevTool/Storage/Keys.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import Row from '../../base/Row';
+import {
+  Body,
+} from '../../base/text';
+
+const Scroll = styled.ScrollView`
+  flex: 1;
+`;
+
+const Wrapper = styled.View`
+`;
+
+const Button = styled.TouchableOpacity`
+`;
+
+const Keys = ({
+  keys,
+  selected,
+  onSelect,
+}) => (
+  <Scroll>
+    <Wrapper>
+      {keys.map(key => (
+        <Button
+          key={key}
+          onPress={() => onSelect(key)}
+        >
+          <Row
+            selected={selected === key}
+          >
+            <Body>{key}</Body>
+          </Row>
+        </Button>
+      ))}
+    </Wrapper>
+  </Scroll>
+)
+
+export default Keys;
--- a/lib/src/components/DevTool/Storage/Value.js
+++ b/lib/src/components/DevTool/Storage/Value.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import {
+  Fixed,
+} from '../../base/text';
+
+const Scroll = styled.ScrollView`
+  flex: 1;
+  border-top-width: 1px;
+  border-color: #ccc;
+`;
+
+const Wrapper = styled.View`
+  padding: 8px 16px;
+`;
+
+const Value = ({
+  value,
+}) => (
+  <Scroll>
+    <Wrapper>
+        <Fixed selectable={true}>{value}</Fixed>
+    </Wrapper>
+  </Scroll>
+)
+
+export default Value;
--- a/lib/src/components/DevTool/Storage/index.js
+++ b/lib/src/components/DevTool/Storage/index.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import {
+  Clipboard,
+  Alert,
+} from 'react-native';
+import Storage from '../../data/Storage';
+import State from '../../data/State';
+import Toolbar from '../../base/Toolbar';
+import Keys from './Keys';
+import Value from './Value';
+
+const Wrapper = styled.View`
+  flex: 1;
+`;
+
+const StorageView = ({
+}) => (
+  <State>
+    {({ selected }, setState) => (
+      <Storage>
+        {(data, update, removeItem, clear) => (
+          <Wrapper>
+            <Toolbar
+              items={[{
+                name: 'Download',
+                icon: 'download',
+                onPress: () => {
+                  Clipboard.setString(JSON.stringify(data, null, '  '));
+                  Alert.alert(
+                    'Copied to clipboard',
+                  );
+                },
+              }, {
+                name: 'Refresh',
+                icon: 'reload',
+                onPress: update,
+              }, {
+                name: 'Clear',
+                icon: 'trash',
+                onPress: clear,
+              }, {
+                name: 'Delete',
+                icon: 'remove',
+                disabled: !selected,
+                onPress: () => removeItem(selected),
+              }]}
+            />
+            <Keys
+              selected={selected}
+              onSelect={(key) => setState({ selected: key })}
+              keys={Object.keys(data)}
+            />
+            {selected && data[selected] && (
+              <Value value={data[selected]} />
+            )}
+          </Wrapper>
+        )}
+      </Storage>
+    )}
+  </State>
+);
+
+export default StorageView;