fix: better web controls

storybookjs · Jan 31, 2022 · f11811e · f11811e
1 parent 06d36c6
commit f11811e
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 40 deletions.
diff --git a/addons/ondevice-controls/src/types/Color.tsx b/addons/ondevice-controls/src/types/Color.tsx
@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   TouchableWithoutFeedback,
   StyleSheet,
+  Platform,
 } from 'react-native';
 import styled from '@emotion/native';
 import { ColorPicker, fromHsv, HsvColor } from '../components/color-picker';
@@ -44,6 +45,17 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => {
     onChange(fromHsv(color));
   };
 
+  if (Platform.OS === 'web') {
+    return (
+      <input
+        type="color"
+        style={{ margin: 10 }}
+        value={arg.value}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    );
+  }
+
   return (
     <View>
       <Touchable color={arg.value} onPress={openColorPicker} />
@@ -55,27 +67,28 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => {
       >
         <TouchableWithoutFeedback onPress={closeColorPicker}>
           <View style={styles.containerCenter}>
-            <TouchableWithoutFeedback>
-              <View style={styles.innerContainer}>
-                <TouchableOpacity onPress={closeColorPicker} style={styles.end}>
-                  <Text style={styles.close}>X</Text>
+            <View style={styles.innerContainer}>
+              <ColorPicker
+                onColorSelected={onChangeColor}
+                onColorChange={(color: HsvColor) => setCurrentColor(color)}
+                defaultColor={arg.value}
+                style={styles.picker}
+              />
+              <View style={styles.actionContainer}>
+                <TouchableOpacity style={styles.actionButton} onPress={closeColorPicker}>
+                  <Text style={styles.actionText}>CANCEL</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.actionButton}
+                  onPress={() => {
+                    onChangeColor(currentColor);
+                    closeColorPicker();
+                  }}
+                >
+                  <Text style={styles.actionText}>DONE</Text>
                 </TouchableOpacity>
-                <ColorPicker
-                  onColorSelected={onChangeColor}
-                  onColorChange={(color: HsvColor) => setCurrentColor(color)}
-                  defaultColor={arg.value}
-                  style={styles.picker}
-                />
-                <View style={styles.applyContainer}>
-                  <TouchableOpacity
-                    style={styles.applyButton}
-                    onPress={() => onChangeColor(currentColor)}
-                  >
-                    <Text style={styles.applyText}>Apply</Text>
-                  </TouchableOpacity>
-                </View>
               </View>
-            </TouchableWithoutFeedback>
+            </View>
           </View>
         </TouchableWithoutFeedback>
       </Modal>
@@ -84,21 +97,32 @@ const ColorType = ({ arg, onChange = (value) => value }: ColorProps) => {
 };
 
 const styles = StyleSheet.create({
-  applyText: { color: '#1EA7FD', fontSize: 16 },
-  applyButton: { paddingVertical: 8, paddingHorizontal: 16 },
-  applyContainer: { alignItems: 'center' },
-  picker: { flex: 1 },
+  actionText: { color: '#1EA7FD', fontSize: 16 },
+  actionButton: { paddingVertical: 8, paddingHorizontal: 8, marginTop: 16 },
+  actionContainer: {
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    width: '100%',
+  },
+  picker: { flex: 1, marginTop: 16 },
   close: { fontSize: 18, fontWeight: 'bold' },
   end: { alignSelf: 'flex-end', padding: 5 },
   innerContainer: {
     backgroundColor: 'white',
     borderWidth: 1,
     borderColor: 'rgb(247, 244, 244)',
-    width: 250,
-    height: 250,
-    padding: 10,
+    width: 350,
+    height: 350,
+    padding: 8,
+    borderRadius: 4,
+  },
+  containerCenter: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.3)',
   },
-  containerCenter: { flex: 1, justifyContent: 'center', alignItems: 'center' },
 });
 
 ColorType.serialize = (value) => value;

diff --git a/addons/ondevice-controls/src/types/Date.tsx b/addons/ondevice-controls/src/types/Date.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/native';
 import React, { useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import DateTimePicker from 'react-native-modal-datetime-picker';
 
 export interface DateProps {
@@ -51,11 +51,36 @@ const DateType = ({ onChange, arg: { name, value } }: DateProps) => {
       ].join('-'),
     [date]
   );
+
   const timeString = useMemo(
     () => `${`0${date.getHours()}`.slice(-2)}:${`0${date.getMinutes()}`.slice(-2)}`,
     [date]
   );
 
+  const webDateString = useMemo(
+    () =>
+      `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, '0')}-${`${
+        date.getDate() + 1
+      }`.padStart(2, '0')}T${`${date.getHours()}`.padStart(
+        2,
+        '0'
+      )}:${`${date.getMinutes()}`.padStart(2, '0')}`,
+
+    [date]
+  );
+
+  if (Platform.OS === 'web') {
+    return (
+      <View testID={name} style={styles.spacing}>
+        <input
+          type="datetime-local"
+          value={webDateString}
+          onChange={(e) => onChange(new Date(e.target.value))}
+        />
+      </View>
+    );
+  }
+
   return (
     <View testID={name} style={styles.spacing}>
       <View style={styles.row}>

diff --git a/addons/ondevice-controls/src/types/Select.tsx b/addons/ondevice-controls/src/types/Select.tsx
@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import React from 'react';
 import ModalPicker from 'react-native-modal-selector';
 import styled from '@emotion/native';
@@ -12,6 +12,20 @@ const Input = styled.TextInput(({ theme }) => ({
   color: theme.labelColor || 'black',
 }));
 
+const Select = (args: any) => <select {...args} />;
+const Container = styled.View(({ theme }) => ({
+  borderWidth: 1,
+  borderRadius: 2,
+  padding: 5,
+  margin: 10,
+  borderColor: theme.borderColor || '#e6e6e6',
+}));
+
+const WebSelect = styled(Select)(({ theme }) => ({
+  border: 'none',
+  color: theme.labelColor || 'black',
+}));
+
 export interface SelectProps {
   arg: {
     name: string;
@@ -46,6 +60,23 @@ const SelectType = ({ arg, onChange }: SelectProps) => {
 
   const selected = active && active.label;
 
+  if (Platform.OS === 'web') {
+    const handleChange = (event) => {
+      onChange(event.target.value);
+    };
+    return (
+      <Container>
+        <WebSelect value={value} onChange={handleChange}>
+          {options.map(({ label, key }) => (
+            <option key={`${label}-${key}`} value={key}>
+              {label}
+            </option>
+          ))}
+        </WebSelect>
+      </Container>
+    );
+  }
+
   return (
     <View>
       <ModalPicker

diff --git a/examples/native/components/ControlExamples/Color/Color.stories.tsx b/examples/native/components/ControlExamples/Color/Color.stories.tsx
@@ -18,5 +18,5 @@ type ColorStory = ComponentStory<typeof Color>;
 
 export const ColorExample: ColorStory = (args) => <Color {...args} />;
 ColorExample.args = {
-  color: 'purple',
+  color: '#a819b9',
 };
diff --git a/examples/native/components/ControlExamples/Date/Date.stories.tsx b/examples/native/components/ControlExamples/Date/Date.stories.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react-native';
-import { LocalisedDate } from './Date';
+import { DateString } from './Date';
 
 const date = new Date(1983, 1, 25);
 
-const DateMeta: ComponentMeta<typeof LocalisedDate> = {
+const DateMeta: ComponentMeta<typeof DateString> = {
   title: 'Date',
-  component: LocalisedDate,
+  component: DateString,
   args: { date: date },
   argTypes: { date: { control: { type: 'date' } } },
 };
 
 export default DateMeta;
 
-type DateStory = ComponentStory<typeof LocalisedDate>;
+type DateStory = ComponentStory<typeof DateString>;
 
-export const Basic: DateStory = (args) => <LocalisedDate {...args} />;
+export const Basic: DateStory = (args) => <DateString {...args} />;
diff --git a/examples/native/components/ControlExamples/Date/Date.tsx b/examples/native/components/ControlExamples/Date/Date.tsx
@@ -5,8 +5,4 @@ interface DateProps {
   date: Date;
 }
 
-export const LocalisedDate = ({ date }: DateProps) => (
-  <Text>
-    {date.toLocaleDateString()} {date.toLocaleTimeString()}
-  </Text>
-);
+export const DateString = ({ date }: DateProps) => <Text>{date.toString()}</Text>;