playground/src/content/Avatar/avatar.playground.jsx at 767a685d37378f18a335ed26a68921aaaf828593 · sachdeva-shrey/playground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import * as React from "react";
import { Avatar } from "react-native-elements";
import Playground from "../../components/playground";
import { useView, PropTypes } from "react-view";

const AvatarPlay = () => {
  const params = useView({
    componentName: "Avatar",
    props: {
      activeOpacity: {
        value: 0.2,
        type: PropTypes.Number,
      },
      avatarStyle: {
        value: `{}`,
        type: PropTypes.Object,
      },
      containerStyle: {
        value: `{ backgroundColor: '#BDBDBD' }`,
        type: PropTypes.Object,
      },
      // icon
      iconStyle: {
        value: `{}`,
        type: PropTypes.Object,
      },
      imageProps: {
        value: `{}`,
        type: PropTypes.Object,
      },
      onLongPress: {
        value: `()=>alert('onLongPress')`,
        type: PropTypes.Function,
      },
      onPress: {
        value: `()=>alert('onPress')`,
        type: PropTypes.Function,
      },

      overlayContainerStyle: {
        value: `{}`,
        type: PropTypes.Object,
      },
      placeholderStyle: {
        value: `{}`,
        type: PropTypes.Object,
      },
      rounded: {
        value: true,
        type: PropTypes.Boolean,
        description: "Indicates that the button is disabled",
      },
      size: {
        value: "large",
        options: {
          small: "small",
          medium: "medium",
          large: "large",
          xlarge: "xlarge",
        },
        type: PropTypes.Enum,
        description: "Defines the size of the Avatar",
      },

      source: {
        value: `{uri:""}`,
        type: PropTypes.Object,
      },
      title: {
        value: "P",
        type: PropTypes.String,
        description: "Visible label.",
      },
      titleStyle: {
        value: `{}`,
        type: PropTypes.Object,
      },
      renderPlaceholderContent: {
        type: PropTypes.ReactNode,
      },
      Component: {
        type: PropTypes.ReactNode,
      },
      ImageComponent: {
        type: PropTypes.ReactNode,
      },
      // titleProps: {
      //   value: `{}`,
      //   type: PropTypes.Object,
      // },
      // titleStyle: {
      //   value: `{marginHorizontal: 5}`,
      //   type: PropTypes.Object,
      // },
      // type: {
      //   value: "solid",
      //   defaultValue: "solid",
      //   options: { solid: "Solid", clear: "Clear", outline: "Outline" },
      //   type: PropTypes.Enum,
      //   description: "Defines the type of the button.",
      // },
    },
    scope: {
      Avatar,
    },
    imports: {
      "react-native-elements": {
        named: ["Avatar"],
      },
    },
  });

  return (
    <React.Fragment>
      <Playground params={params} />
    </React.Fragment>
  );
};

export default AvatarPlay;