V2 (#1)

2026-02-08 00:36:26 +01:00 · 2019-08-23 00:12:49 +02:00
parent c30e9f27a5
commit fd3a2bc24f
94 changed files with 13855 additions and 9269 deletions
--- a/packages/lib/src/components/base/Toolbar/Button.js
+++ b/packages/lib/src/components/base/Toolbar/Button.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import Icon from '../Icon';
+import {
+  Body,
+} from '../text';
+
+const Item = styled.TouchableOpacity`
+padding: 10px 10px;
+opacity: ${({ disabled }) => disabled ? 0.3 : 1};
+`;
+
+const Button = ({
+  name,
+  icon,
+  onPress,
+  disabled,
+}) => (
+  <Item
+    onPress={disabled ?  undefined : onPress}
+    disabled={disabled}
+  >
+    {icon ? (
+      <Icon name={icon} />
+    ) : (
+      <Body color={disabled ? '#ccc' : undefined}>{name}</Body>
+    )}
+  </Item>
+);
+
+export default Button;
--- a/packages/lib/src/components/base/Toolbar/Selector.js
+++ b/packages/lib/src/components/base/Toolbar/Selector.js
@@ -0,0 +1,74 @@
+import React, { Fragment, useState } from 'react';
+import {
+  SafeAreaView,
+  TouchableOpacity,
+} from 'react-native';
+import Button from './Button';
+import Row from '../Row';
+import Icon from '../Icon';
+import Modal from '../Modal';
+import {
+  Body,
+} from '../text';
+
+const Selector = ({
+  multiSelect = false,
+  onSelect,
+  options = [],
+  ...others
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+      <Fragment>
+        <Button
+          {...others}
+          onPress={() => {
+            setOpen(true);
+          }}
+        />
+        <Modal
+          animationType="slide"
+          transparent={false}
+          visible={!!open}
+          onRequestClose={() => {
+            setOpen(false);
+          }}
+        >
+          <SafeAreaView
+            forceInset={{ top: 'always', vertical: 'always' }}
+            style={{flex: 1}}
+          >
+            <Button
+              name="Close"
+              icon="close"
+              onPress={() => {
+                setOpen(false);
+              }}
+            />
+            {options.map((option) => (
+              <TouchableOpacity
+                key={option.name}
+                onPress={() => {
+                  if (!multiSelect) {
+                    options.forEach(o => o.selected = false);
+                  }
+                  option.selected = !option.selected
+                  onSelect(options);
+                }}
+              >
+                <Row
+                  left={(
+                    <Icon name={option.selected ? 'check' : 'square'} />
+                  )}
+                >
+                  <Body>{option.name}</Body>
+                </Row>
+              </TouchableOpacity>
+            ))}
+          </SafeAreaView>
+        </Modal>
+      </Fragment>
+  );
+};
+
+export default Selector;
--- a/packages/lib/src/components/base/Toolbar/Seperator.js
+++ b/packages/lib/src/components/base/Toolbar/Seperator.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components/native';
+
+const Seperator = styled.View`
+  flex: 1;
+`;
+
+export default Seperator;
--- a/packages/lib/src/components/base/Toolbar/index.js
+++ b/packages/lib/src/components/base/Toolbar/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import Button from './Button';
+import Seperator from './Seperator';
+import Selector from './Selector';
+
+export {
+  Button,
+  Seperator,
+  Selector,
+}
+
+const Wrapper = styled.View`
+  flex-direction: row;
+  align-items: center;
+  border-bottom-width: 1px;
+  border-color: #ccc;
+  padding: 0 10px;
+`;
+
+const Toolbar = ({
+  children,
+}) => (
+  <Wrapper>
+    {children}
+  </Wrapper>
+)
+
+export default Toolbar;