@draftbit/core 46.10.3-7afc5f.2 → 46.10.3-872bd2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
12
12
  android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
13
13
  ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
14
14
  });
15
- exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;
15
+ exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "46.10.3-7afc5f.2+7afc5f0",
3
+ "version": "46.10.3-872bd2.2+872bd25",
4
4
  "description": "Core (non-native) Components",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
41
41
  "dependencies": {
42
42
  "@date-io/date-fns": "^1.3.13",
43
43
  "@draftbit/react-theme-provider": "^2.1.1",
44
- "@draftbit/types": "^46.10.3-7afc5f.2+7afc5f0",
44
+ "@draftbit/types": "^46.10.3-872bd2.2+872bd25",
45
45
  "@material-ui/core": "^4.11.0",
46
46
  "@material-ui/pickers": "^3.2.10",
47
47
  "@react-native-community/slider": "4.2.3",
@@ -100,5 +100,5 @@
100
100
  ]
101
101
  ]
102
102
  },
103
- "gitHead": "7afc5f0859e2f4856373aaee81d3c6137b2e3fe9"
103
+ "gitHead": "872bd25f78c5d21f88d9bbc52c81e34fe9a2ae9e"
104
104
  }
@@ -1,40 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = _interopRequireDefault(require("react"));
8
- var _theming = require("../theming");
9
- var _Touchable = _interopRequireDefault(require("./Touchable"));
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
12
- const getWidth = numColumns => {
13
- switch (numColumns) {
14
- case 1:
15
- return "33%";
16
- case 2:
17
- return "50%";
18
- default:
19
- return "100%";
20
- }
21
- };
22
- const Card = _ref => {
23
- let {
24
- numColumns = 3,
25
- children,
26
- onPress,
27
- style,
28
- ...rest
29
- } = _ref;
30
- const width = getWidth(numColumns);
31
- return /*#__PURE__*/_react.default.createElement(_Touchable.default, _extends({
32
- disabled: !onPress,
33
- onPress: onPress,
34
- style: [style, {
35
- width
36
- }]
37
- }, rest), children);
38
- };
39
- var _default = (0, _theming.withTheme)(Card);
40
- exports.default = _default;
@@ -1,157 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var React = _interopRequireWildcard(require("react"));
8
- var _reactNative = require("react-native");
9
- var _color = _interopRequireDefault(require("color"));
10
- var _Config = _interopRequireDefault(require("./Config"));
11
- var _Text = _interopRequireDefault(require("./Text"));
12
- var _Elevation = _interopRequireDefault(require("./Elevation"));
13
- var _theming = require("../theming");
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
16
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
18
- const FAB = _ref => {
19
- let {
20
- Icon,
21
- icon,
22
- disabled = false,
23
- type = "solid",
24
- loading = false,
25
- color: colorOverride,
26
- label,
27
- onPress,
28
- elevation = 0,
29
- style,
30
- theme: {
31
- colors,
32
- disabledOpacity,
33
- roundness,
34
- typography
35
- },
36
- ...rest
37
- } = _ref;
38
- let backgroundColor, borderColor, textColor, borderWidth;
39
- const buttonColor = colorOverride || colors.primary;
40
- if (type === "standard" || type === "extended" || type === "fixed") {
41
- backgroundColor = buttonColor;
42
- if (disabled) {
43
- textColor = (0, _color.default)(colors.surface).alpha(disabledOpacity).rgb().string();
44
- } else {
45
- textColor = colors.surface;
46
- }
47
- } else {
48
- backgroundColor = "transparent";
49
- if (disabled) {
50
- textColor = (0, _color.default)(buttonColor).alpha(disabledOpacity).rgb().string();
51
- } else {
52
- textColor = buttonColor;
53
- }
54
- }
55
- if (type === "outline") {
56
- if (disabled) {
57
- borderColor = (0, _color.default)(buttonColor).alpha(disabledOpacity).rgb().string();
58
- } else {
59
- borderColor = buttonColor;
60
- }
61
- borderWidth = _reactNative.StyleSheet.hairlineWidth;
62
- } else {
63
- borderColor = "transparent";
64
- borderWidth = 0;
65
- }
66
- const buttonStyle = {
67
- backgroundColor,
68
- borderColor,
69
- borderWidth,
70
- borderRadius: roundness,
71
- alignItems: "center",
72
- justifyContent: "center"
73
- };
74
- const buttonStyles = [styles.button, buttonStyle];
75
- const contentStyle = [styles.content];
76
- const textStyle = {
77
- textAlign: "center",
78
- color: textColor
79
- };
80
- const iconStyle = [styles.icon, {
81
- width: _Config.default.buttonIconSize
82
- }];
83
- if (type === "standard" || type === "outline") {
84
- buttonStyle.width = _Config.default.FABSize;
85
- buttonStyle.height = _Config.default.FABSize;
86
- buttonStyle.borderRadius = _Config.default.FABBorderRadius;
87
- contentStyle.push({
88
- width: _Config.default.FABSize,
89
- height: _Config.default.FABSize
90
- });
91
- }
92
- if (type === "extended" || type === "fixed") {
93
- iconStyle.push({
94
- marginLeft: 16,
95
- marginRight: -8
96
- });
97
- textStyle.margin = 16;
98
- }
99
- if (type === "fixed") {
100
- buttonStyles.push({
101
- height: _Config.default.FABFixedHeight,
102
- alignSelf: "stretch"
103
- });
104
- }
105
- return /*#__PURE__*/React.createElement(_Elevation.default, {
106
- style: [{
107
- elevation
108
- }, style]
109
- }, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({}, rest, {
110
- onPress: onPress,
111
- accessibilityState: {
112
- disabled
113
- },
114
- accessibilityRole: "button",
115
- disabled: disabled || loading,
116
- style: buttonStyles
117
- }), /*#__PURE__*/React.createElement(_reactNative.View, {
118
- style: styles.content
119
- }, icon && loading !== true ? /*#__PURE__*/React.createElement(_reactNative.View, {
120
- style: iconStyle
121
- }, /*#__PURE__*/React.createElement(Icon, {
122
- name: icon,
123
- size: _Config.default.buttonIconSize,
124
- color: textColor
125
- })) : null, loading ? /*#__PURE__*/React.createElement(_reactNative.ActivityIndicator, {
126
- size: "small",
127
- color: textColor,
128
- style: iconStyle
129
- }) : null, label ? /*#__PURE__*/React.createElement(_Text.default, {
130
- numberOfLines: 1,
131
- style: [textStyle, typography.button]
132
- }, label) : null)));
133
- };
134
- const styles = _reactNative.StyleSheet.create({
135
- button: {
136
- borderStyle: "solid"
137
- },
138
- content: {
139
- flexDirection: "row",
140
- alignItems: "center",
141
- justifyContent: "center"
142
- },
143
- icon: {
144
- alignItems: "center",
145
- justifyContent: "center",
146
- width: _Config.default.buttonIconSize
147
- },
148
- fixed: {
149
- left: 0,
150
- right: 0,
151
- bottom: 0,
152
- height: 64,
153
- borderRadius: 0
154
- }
155
- });
156
- var _default = (0, _theming.withTheme)(FAB);
157
- exports.default = _default;
@@ -1,32 +0,0 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
- import React from "react";
3
- import { withTheme } from "../theming";
4
- import Touchable from "./Touchable";
5
- const getWidth = numColumns => {
6
- switch (numColumns) {
7
- case 1:
8
- return "33%";
9
- case 2:
10
- return "50%";
11
- default:
12
- return "100%";
13
- }
14
- };
15
- const Card = _ref => {
16
- let {
17
- numColumns = 3,
18
- children,
19
- onPress,
20
- style,
21
- ...rest
22
- } = _ref;
23
- const width = getWidth(numColumns);
24
- return /*#__PURE__*/React.createElement(Touchable, _extends({
25
- disabled: !onPress,
26
- onPress: onPress,
27
- style: [style, {
28
- width
29
- }]
30
- }, rest), children);
31
- };
32
- export default withTheme(Card);
@@ -1,147 +0,0 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
- import * as React from "react";
3
- import { ActivityIndicator, View, StyleSheet, Pressable } from "react-native";
4
- import color from "color";
5
- import Config from "./Config";
6
- import Text from "./Text";
7
- import Elevation from "./Elevation";
8
- import { withTheme } from "../theming";
9
- const FAB = _ref => {
10
- let {
11
- Icon,
12
- icon,
13
- disabled = false,
14
- type = "solid",
15
- loading = false,
16
- color: colorOverride,
17
- label,
18
- onPress,
19
- elevation = 0,
20
- style,
21
- theme: {
22
- colors,
23
- disabledOpacity,
24
- roundness,
25
- typography
26
- },
27
- ...rest
28
- } = _ref;
29
- let backgroundColor, borderColor, textColor, borderWidth;
30
- const buttonColor = colorOverride || colors.primary;
31
- if (type === "standard" || type === "extended" || type === "fixed") {
32
- backgroundColor = buttonColor;
33
- if (disabled) {
34
- textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
35
- } else {
36
- textColor = colors.surface;
37
- }
38
- } else {
39
- backgroundColor = "transparent";
40
- if (disabled) {
41
- textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
42
- } else {
43
- textColor = buttonColor;
44
- }
45
- }
46
- if (type === "outline") {
47
- if (disabled) {
48
- borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
49
- } else {
50
- borderColor = buttonColor;
51
- }
52
- borderWidth = StyleSheet.hairlineWidth;
53
- } else {
54
- borderColor = "transparent";
55
- borderWidth = 0;
56
- }
57
- const buttonStyle = {
58
- backgroundColor,
59
- borderColor,
60
- borderWidth,
61
- borderRadius: roundness,
62
- alignItems: "center",
63
- justifyContent: "center"
64
- };
65
- const buttonStyles = [styles.button, buttonStyle];
66
- const contentStyle = [styles.content];
67
- const textStyle = {
68
- textAlign: "center",
69
- color: textColor
70
- };
71
- const iconStyle = [styles.icon, {
72
- width: Config.buttonIconSize
73
- }];
74
- if (type === "standard" || type === "outline") {
75
- buttonStyle.width = Config.FABSize;
76
- buttonStyle.height = Config.FABSize;
77
- buttonStyle.borderRadius = Config.FABBorderRadius;
78
- contentStyle.push({
79
- width: Config.FABSize,
80
- height: Config.FABSize
81
- });
82
- }
83
- if (type === "extended" || type === "fixed") {
84
- iconStyle.push({
85
- marginLeft: 16,
86
- marginRight: -8
87
- });
88
- textStyle.margin = 16;
89
- }
90
- if (type === "fixed") {
91
- buttonStyles.push({
92
- height: Config.FABFixedHeight,
93
- alignSelf: "stretch"
94
- });
95
- }
96
- return /*#__PURE__*/React.createElement(Elevation, {
97
- style: [{
98
- elevation
99
- }, style]
100
- }, /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
101
- onPress: onPress,
102
- accessibilityState: {
103
- disabled
104
- },
105
- accessibilityRole: "button",
106
- disabled: disabled || loading,
107
- style: buttonStyles
108
- }), /*#__PURE__*/React.createElement(View, {
109
- style: styles.content
110
- }, icon && loading !== true ? /*#__PURE__*/React.createElement(View, {
111
- style: iconStyle
112
- }, /*#__PURE__*/React.createElement(Icon, {
113
- name: icon,
114
- size: Config.buttonIconSize,
115
- color: textColor
116
- })) : null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
117
- size: "small",
118
- color: textColor,
119
- style: iconStyle
120
- }) : null, label ? /*#__PURE__*/React.createElement(Text, {
121
- numberOfLines: 1,
122
- style: [textStyle, typography.button]
123
- }, label) : null)));
124
- };
125
- const styles = StyleSheet.create({
126
- button: {
127
- borderStyle: "solid"
128
- },
129
- content: {
130
- flexDirection: "row",
131
- alignItems: "center",
132
- justifyContent: "center"
133
- },
134
- icon: {
135
- alignItems: "center",
136
- justifyContent: "center",
137
- width: Config.buttonIconSize
138
- },
139
- fixed: {
140
- left: 0,
141
- right: 0,
142
- bottom: 0,
143
- height: 64,
144
- borderRadius: 0
145
- }
146
- });
147
- export default withTheme(FAB);
@@ -1,15 +0,0 @@
1
- import React from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
3
- import theme from "../styles/DefaultTheme";
4
- declare type Props = {
5
- numColumns?: number;
6
- children?: React.ReactNode;
7
- onPress?: () => void;
8
- style?: StyleProp<ViewStyle>;
9
- theme: typeof theme;
10
- };
11
- declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
12
- theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
13
- }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
14
- export default _default;
15
- //# sourceMappingURL=DeprecatedCardWrapper.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DeprecatedCardWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/DeprecatedCardWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAE3C,aAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;;;;AAiCF,wBAA+B"}
@@ -1,56 +0,0 @@
1
- import * as React from "react";
2
- import { StyleProp, ViewStyle, PressableProps } from "react-native";
3
- import type { Theme } from "../styles/DefaultTheme";
4
- import type { IconSlot } from "../interfaces/Icon";
5
- /**
6
- * A floating action button represents the primary action in an application.
7
- *
8
- * <div class="screenshots">
9
- * <img src="screenshots/fab-1.png" />
10
- * <img src="screenshots/fab-2.png" />
11
- * </div>
12
- *
13
- * ## Usage
14
- * ```js
15
- * import * as React from 'react';
16
- * import { StyleSheet } from 'react-native';
17
- * import { FAB } from '@draftbit/ui';
18
- *
19
- * const MyComponent = () => (
20
- * <FAB
21
- * style={styles.fab}
22
- * type="outline"
23
- * icon="add"
24
- * onPress={() => console.log('Pressed')}
25
- * />
26
- * );
27
- *
28
- * const styles = StyleSheet.create({
29
- * fab: {
30
- * position: 'absolute',
31
- * margin: 16,
32
- * right: 0,
33
- * bottom: 0,
34
- * },
35
- * })
36
- *
37
- * export default MyComponent;
38
- * ```
39
- */
40
- declare type Props = {
41
- disabled?: boolean;
42
- type?: "solid" | "extended" | "outline" | "fixed" | "standard";
43
- loading?: boolean;
44
- icon?: string;
45
- color?: string;
46
- label?: string;
47
- onPress: () => void;
48
- elevation?: number;
49
- theme: Theme;
50
- style?: StyleProp<ViewStyle>;
51
- } & PressableProps & IconSlot;
52
- declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
53
- theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
54
- }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<Props>> & React.FC<React.PropsWithChildren<Props>>, {}>;
55
- export default _default;
56
- //# sourceMappingURL=DeprecatedFAB.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DeprecatedFAB.d.ts","sourceRoot":"","sources":["../../../../src/components/DeprecatedFAB.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,SAAS,EACT,SAAS,EAGT,cAAc,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,cAAc,GAChB,QAAQ,CAAC;;;;AAkKX,wBAA8B"}
@@ -1,18 +0,0 @@
1
- import React from "react";
2
- import { withTheme } from "../theming";
3
- import Touchable from "./Touchable";
4
- const getWidth = (numColumns) => {
5
- switch (numColumns) {
6
- case 1:
7
- return "33%";
8
- case 2:
9
- return "50%";
10
- default:
11
- return "100%";
12
- }
13
- };
14
- const Card = ({ numColumns = 3, children, onPress, style, ...rest }) => {
15
- const width = getWidth(numColumns);
16
- return (React.createElement(Touchable, { disabled: !onPress, onPress: onPress, style: [style, { width }], ...rest }, children));
17
- };
18
- export default withTheme(Card);
@@ -1,46 +0,0 @@
1
- import React from "react";
2
- import { withTheme } from "../theming";
3
- import Touchable from "./Touchable";
4
- import { StyleProp, ViewStyle } from "react-native";
5
- import theme from "../styles/DefaultTheme";
6
-
7
- type Props = {
8
- numColumns?: number;
9
- children?: React.ReactNode;
10
- onPress?: () => void;
11
- style?: StyleProp<ViewStyle>;
12
- theme: typeof theme;
13
- };
14
-
15
- const getWidth = (numColumns: number) => {
16
- switch (numColumns) {
17
- case 1:
18
- return "33%";
19
- case 2:
20
- return "50%";
21
- default:
22
- return "100%";
23
- }
24
- };
25
-
26
- const Card: React.FC<React.PropsWithChildren<Props>> = ({
27
- numColumns = 3,
28
- children,
29
- onPress,
30
- style,
31
- ...rest
32
- }) => {
33
- const width = getWidth(numColumns);
34
- return (
35
- <Touchable
36
- disabled={!onPress}
37
- onPress={onPress}
38
- style={[style, { width }]}
39
- {...rest}
40
- >
41
- {children}
42
- </Touchable>
43
- );
44
- };
45
-
46
- export default withTheme(Card);
@@ -1,114 +0,0 @@
1
- import * as React from "react";
2
- import { ActivityIndicator, View, StyleSheet, Pressable, } from "react-native";
3
- import color from "color";
4
- import Config from "./Config";
5
- import Text from "./Text";
6
- import Elevation from "./Elevation";
7
- import { withTheme } from "../theming";
8
- const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, color: colorOverride, label, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
9
- let backgroundColor, borderColor, textColor, borderWidth;
10
- const buttonColor = colorOverride || colors.primary;
11
- if (type === "standard" || type === "extended" || type === "fixed") {
12
- backgroundColor = buttonColor;
13
- if (disabled) {
14
- textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
15
- }
16
- else {
17
- textColor = colors.surface;
18
- }
19
- }
20
- else {
21
- backgroundColor = "transparent";
22
- if (disabled) {
23
- textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
24
- }
25
- else {
26
- textColor = buttonColor;
27
- }
28
- }
29
- if (type === "outline") {
30
- if (disabled) {
31
- borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
32
- }
33
- else {
34
- borderColor = buttonColor;
35
- }
36
- borderWidth = StyleSheet.hairlineWidth;
37
- }
38
- else {
39
- borderColor = "transparent";
40
- borderWidth = 0;
41
- }
42
- const buttonStyle = {
43
- backgroundColor,
44
- borderColor,
45
- borderWidth,
46
- borderRadius: roundness,
47
- alignItems: "center",
48
- justifyContent: "center",
49
- };
50
- const buttonStyles = [styles.button, buttonStyle];
51
- const contentStyle = [styles.content];
52
- const textStyle = {
53
- textAlign: "center",
54
- color: textColor,
55
- };
56
- const iconStyle = [
57
- styles.icon,
58
- {
59
- width: Config.buttonIconSize,
60
- },
61
- ];
62
- if (type === "standard" || type === "outline") {
63
- buttonStyle.width = Config.FABSize;
64
- buttonStyle.height = Config.FABSize;
65
- buttonStyle.borderRadius = Config.FABBorderRadius;
66
- contentStyle.push({
67
- width: Config.FABSize,
68
- height: Config.FABSize,
69
- });
70
- }
71
- if (type === "extended" || type === "fixed") {
72
- iconStyle.push({
73
- marginLeft: 16,
74
- marginRight: -8,
75
- });
76
- textStyle.margin = 16;
77
- }
78
- if (type === "fixed") {
79
- buttonStyles.push({
80
- height: Config.FABFixedHeight,
81
- alignSelf: "stretch",
82
- });
83
- }
84
- return (React.createElement(Elevation, { style: [{ elevation }, style] },
85
- React.createElement(Pressable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
86
- React.createElement(View, { style: styles.content },
87
- icon && loading !== true ? (React.createElement(View, { style: iconStyle },
88
- React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,
89
- loading ? (React.createElement(ActivityIndicator, { size: "small", color: textColor, style: iconStyle })) : null,
90
- label ? (React.createElement(Text, { numberOfLines: 1, style: [textStyle, typography.button] }, label)) : null))));
91
- };
92
- const styles = StyleSheet.create({
93
- button: {
94
- borderStyle: "solid",
95
- },
96
- content: {
97
- flexDirection: "row",
98
- alignItems: "center",
99
- justifyContent: "center",
100
- },
101
- icon: {
102
- alignItems: "center",
103
- justifyContent: "center",
104
- width: Config.buttonIconSize,
105
- },
106
- fixed: {
107
- left: 0,
108
- right: 0,
109
- bottom: 0,
110
- height: 64,
111
- borderRadius: 0,
112
- },
113
- });
114
- export default withTheme(FAB);
@@ -1,231 +0,0 @@
1
- import * as React from "react";
2
- import {
3
- ActivityIndicator,
4
- View,
5
- StyleSheet,
6
- StyleProp,
7
- ViewStyle,
8
- TextStyle,
9
- Pressable,
10
- PressableProps,
11
- } from "react-native";
12
- import color from "color";
13
- import Config from "./Config";
14
- import Text from "./Text";
15
- import Elevation from "./Elevation";
16
- import { withTheme } from "../theming";
17
-
18
- import type { Theme } from "../styles/DefaultTheme";
19
- import type { IconSlot } from "../interfaces/Icon";
20
-
21
- /**
22
- * A floating action button represents the primary action in an application.
23
- *
24
- * <div class="screenshots">
25
- * <img src="screenshots/fab-1.png" />
26
- * <img src="screenshots/fab-2.png" />
27
- * </div>
28
- *
29
- * ## Usage
30
- * ```js
31
- * import * as React from 'react';
32
- * import { StyleSheet } from 'react-native';
33
- * import { FAB } from '@draftbit/ui';
34
- *
35
- * const MyComponent = () => (
36
- * <FAB
37
- * style={styles.fab}
38
- * type="outline"
39
- * icon="add"
40
- * onPress={() => console.log('Pressed')}
41
- * />
42
- * );
43
- *
44
- * const styles = StyleSheet.create({
45
- * fab: {
46
- * position: 'absolute',
47
- * margin: 16,
48
- * right: 0,
49
- * bottom: 0,
50
- * },
51
- * })
52
- *
53
- * export default MyComponent;
54
- * ```
55
- */
56
-
57
- type Props = {
58
- disabled?: boolean;
59
- type?: "solid" | "extended" | "outline" | "fixed" | "standard";
60
- loading?: boolean;
61
- icon?: string;
62
- color?: string;
63
- label?: string;
64
- onPress: () => void;
65
- elevation?: number;
66
- theme: Theme;
67
- style?: StyleProp<ViewStyle>;
68
- } & PressableProps &
69
- IconSlot;
70
-
71
- const FAB: React.FC<React.PropsWithChildren<Props>> = ({
72
- Icon,
73
- icon,
74
- disabled = false,
75
- type = "solid",
76
- loading = false,
77
- color: colorOverride,
78
- label,
79
- onPress,
80
- elevation = 0,
81
- style,
82
- theme: { colors, disabledOpacity, roundness, typography },
83
- ...rest
84
- }) => {
85
- let backgroundColor, borderColor, textColor, borderWidth;
86
- const buttonColor = colorOverride || colors.primary;
87
-
88
- if (type === "standard" || type === "extended" || type === "fixed") {
89
- backgroundColor = buttonColor;
90
-
91
- if (disabled) {
92
- textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
93
- } else {
94
- textColor = colors.surface;
95
- }
96
- } else {
97
- backgroundColor = "transparent";
98
-
99
- if (disabled) {
100
- textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
101
- } else {
102
- textColor = buttonColor;
103
- }
104
- }
105
-
106
- if (type === "outline") {
107
- if (disabled) {
108
- borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
109
- } else {
110
- borderColor = buttonColor;
111
- }
112
- borderWidth = StyleSheet.hairlineWidth;
113
- } else {
114
- borderColor = "transparent";
115
- borderWidth = 0;
116
- }
117
-
118
- const buttonStyle: StyleProp<ViewStyle> = {
119
- backgroundColor,
120
- borderColor,
121
- borderWidth,
122
- borderRadius: roundness,
123
- alignItems: "center",
124
- justifyContent: "center",
125
- };
126
-
127
- const buttonStyles: StyleProp<ViewStyle>[] = [styles.button, buttonStyle];
128
-
129
- const contentStyle: StyleProp<ViewStyle>[] = [styles.content];
130
-
131
- const textStyle: StyleProp<TextStyle> = {
132
- textAlign: "center",
133
- color: textColor,
134
- };
135
-
136
- const iconStyle: StyleProp<ViewStyle>[] = [
137
- styles.icon,
138
- {
139
- width: Config.buttonIconSize,
140
- },
141
- ];
142
-
143
- if (type === "standard" || type === "outline") {
144
- buttonStyle.width = Config.FABSize;
145
- buttonStyle.height = Config.FABSize;
146
- buttonStyle.borderRadius = Config.FABBorderRadius;
147
-
148
- contentStyle.push({
149
- width: Config.FABSize,
150
- height: Config.FABSize,
151
- });
152
- }
153
-
154
- if (type === "extended" || type === "fixed") {
155
- iconStyle.push({
156
- marginLeft: 16,
157
- marginRight: -8,
158
- });
159
-
160
- textStyle.margin = 16;
161
- }
162
-
163
- if (type === "fixed") {
164
- buttonStyles.push({
165
- height: Config.FABFixedHeight,
166
- alignSelf: "stretch",
167
- });
168
- }
169
-
170
- return (
171
- <Elevation style={[{ elevation }, style]}>
172
- <Pressable
173
- {...rest}
174
- onPress={onPress}
175
- accessibilityState={{ disabled }}
176
- accessibilityRole="button"
177
- disabled={disabled || loading}
178
- style={buttonStyles}
179
- >
180
- <View style={styles.content}>
181
- {icon && loading !== true ? (
182
- <View style={iconStyle}>
183
- <Icon
184
- name={icon}
185
- size={Config.buttonIconSize}
186
- color={textColor}
187
- />
188
- </View>
189
- ) : null}
190
- {loading ? (
191
- <ActivityIndicator
192
- size="small"
193
- color={textColor}
194
- style={iconStyle}
195
- />
196
- ) : null}
197
- {label ? (
198
- <Text numberOfLines={1} style={[textStyle, typography.button]}>
199
- {label}
200
- </Text>
201
- ) : null}
202
- </View>
203
- </Pressable>
204
- </Elevation>
205
- );
206
- };
207
-
208
- const styles = StyleSheet.create({
209
- button: {
210
- borderStyle: "solid",
211
- },
212
- content: {
213
- flexDirection: "row",
214
- alignItems: "center",
215
- justifyContent: "center",
216
- },
217
- icon: {
218
- alignItems: "center",
219
- justifyContent: "center",
220
- width: Config.buttonIconSize,
221
- },
222
- fixed: {
223
- left: 0,
224
- right: 0,
225
- bottom: 0,
226
- height: 64,
227
- borderRadius: 0,
228
- },
229
- });
230
-
231
- export default withTheme(FAB);