@kietpt2003/react-native-core-ui
Version:
React Native Core UI components by KietPT
687 lines (672 loc) • 17.1 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/SvgIcon/SvgIcon.tsx
var SvgIcon_exports = {};
__export(SvgIcon_exports, {
default: () => SvgIcon_default
});
module.exports = __toCommonJS(SvgIcon_exports);
var import_react9 = __toESM(require("react"));
// src/utils/resolutions.ts
var import_react_native = require("react-native");
var import_react_native_iphone_x_helper = require("react-native-iphone-x-helper");
var import_react_native_device_info = __toESM(require("react-native-device-info"));
var isTablet = import_react_native_device_info.default.isTablet();
var statusBarHeight = import_react_native.Platform.OS == "android" && import_react_native.StatusBar.currentHeight ? import_react_native.StatusBar.currentHeight : 0;
// src/utils/scale.ts
var import_react_native2 = require("react-native");
var { width, height } = import_react_native2.Dimensions.get("window");
var IPHONE_12_WIDTH = 375;
var IPHONE_12_HEIGTH = 812;
var scaleWidth = width / IPHONE_12_WIDTH;
var scaleHeight = height / IPHONE_12_HEIGTH;
var scaleAvg = (scaleWidth + scaleHeight) / 2;
var scaleFont = (size) => Math.round(import_react_native2.PixelRatio.roundToNearestPixel(size * scaleAvg));
var scale = (size) => Math.round(import_react_native2.PixelRatio.roundToNearestPixel(size * scaleWidth));
// src/themes/colors.ts
var colors = {
// white
default: "#F1F1F1",
white: "#FFFFFF",
white_80: "rgba(255, 255, 255, 0.8)",
// black
black: "#000000",
black_262626: "#262626",
// transparent
transparent00: "rgba(0, 0, 0, 0)",
transparent10: "rgba(0, 0, 0, 0.1)",
transparent25: "rgba(0, 0, 0, 0.25)",
transparent30: "rgba(0, 0, 0, 0.3)",
transparent40: "rgba(0, 0, 0, 0.4)",
transparent50: "rgba(0, 0, 0, 0.5)",
transparent80: "rgba(0, 0, 0, 0.8)",
// red
red_FF6262: "#FF6262",
red_E00102: "#E00102",
red_E90000: "#E90000",
red_FF0303: "#FF0303",
red_EB4D3D: "#EB4D3D",
red_ED1C1C: "#ED1C1C",
red_F26122: "#F26122",
red_FF3F30: "#FF3F30",
red_FF4D4F: "#FF4D4F",
red_FF6E30: "#FF6E30",
red_F24822: "#F24822",
// green
green_32B14A: "#32B14A",
green_00A720: "#00A720",
green_42A046: "#42A046",
green_4CD964: "#4CD964",
green_8AAD0B: "#8AAD0B",
green_7FBA00: "#7FBA00",
green_3CB371: "#3CB371",
green_7BC143: "#7BC143",
green_387C2B: "#387C2B",
green_50A91A: "#50A91A",
green_2D880C: "#2D880C",
green_389E0D: "#389E0D",
green_42A013: "#42A013",
green_52C41A: "#52C41A",
green_279C2E: "#279C2E",
green_266431: "#266431",
green_32A702: "#32A702",
green_3C7700: "#3C7700",
green_3AA015: "#3AA015",
green_30C75E: "#30C75E",
green_81B214: "#81B214",
green_28C76F: "#28C76F",
green_6CC149: "#6CC149",
green_B2C8B8: "#B2C8B8",
green_6AD36E: "#6AD36E",
green_6ECA67: "#6ECA67",
green_419522: "#419522",
green_266432: "#266432",
green_386338: "#386338",
green_28663B: "#28663B",
green_266643: "#266643",
green_08674F: "#08674F",
green_206A5D: "#206A5D",
green_194527: "#194527",
green_1A4D2E: "#1A4D2E",
green_91C788: "#91C788",
green_D0F4C2: "#D0F4C2",
green_C7F9CC: "#C7F9CC",
green_CBFFDA: "#CBFFDA",
green_9AD7AC: "#9AD7AC",
green_A7E8B9: "#A7E8B9",
green_A0E8AD: "#A0E8AD",
green_92E3A973: "#92E3A973",
green_7BC1431A: "#7BC1431A",
green_0B5270: "#0B5270",
green_E0FEE8: "#E0FEE8",
green_EBF6E3: "#EBF6E3",
greenlightF8ECD2: "#F8ECD2",
green_gradient: ["#7BC143", "#387C2B"],
green_gradient_2: ["#42A046", "#42A046"],
// blue
blue: "#00B4F0",
blue_29ABE2: "#29ABE2",
blue_00A7E1: "#00A7E1",
blue_3677BC: "#3677BC",
blue_DDF7FF: "#DDF7FF",
blue_2B65B2: "#2B65B2",
blue_B2E5F6: "#B2E5F6",
blue_86D3EE: "#86D3EE",
blue_80D3F0: "#80D3F0",
blue_1890FF: "#1890FF",
// yellow
yellow_EDDE5D: "#EDDE5D",
yellow_FFCC29: "#FFCC29",
yellow_F0BD26: "#F0BD26",
yellow_F6BF32: "#F6BF32",
// orange
orange_EB996E: "#EB996E",
orange_F98B0A: "#F98B0A",
orange_F58634: "#F58634",
orange_FFA500: "#FFA500",
orangeFAAE4F: "#FAAE4F",
// grey
gray: "#6E6E6E",
gray_BCBCBC: "#BCBCBC",
gray_7E7E7E: "#7E7E7E",
gray_E5E0E4: "#E5E0E4",
gray_F1F1F1: "#F1F1F1",
gray_E7E3E3: "#E7E3E3",
gray_3C3C3C: "#3C3C3C",
gray_CCCCCC: "#CCCCCC",
gray_FAFAFA: "#FAFAFA",
gray_FDFDFD: "#FDFDFD",
gray_D9D9D9: "#D9D9D9",
gray_D9D9D980: "#D9D9D980",
gray_E6E6E6: "#E6E6E6",
gray_EBEBEB: "#EBEBEB",
gray_F5F5F5: "#F5F5F5",
gray_EEEEEE: "#EEEEEE",
gray_727272: "#727272",
gray_9CA3A5: "#9CA3A5",
gray_E5E5E5: "#E5E5E5",
gray_D1D2D4: "#D1D2D4",
gray_A0A0A0: "#A0A0A0",
gray_EAEAEA: "#EAEAEA",
gray_B3B3B3: "#B3B3B3",
gray_8A8A8A: "#8A8A8A",
gray_E4E4E4: "#E4E4E4",
gray_888888: "#888888",
gray_F4F4F4: "#F4F4F4",
gray_4F4F4F: "#4F4F4F",
gray_DDDDDD: "#DDDDDD",
gray_E1E5EA: "#E1E5EA",
//purple
purple_222C67: "#222C67",
purple_9370DB: "#9370DB",
//shadow
shadow: {
elevation: 4,
shadowColor: "#000",
shadowOpacity: 0.2,
shadowRadius: 3.84,
shadowOffset: {
width: 0,
height: -1
}
},
shadow_btn: {
elevation: 4,
shadowColor: "#000",
shadowOpacity: 0.25,
shadowRadius: 2,
shadowOffset: {
width: 0,
height: 4
}
},
shadow_order: {
elevation: 3,
shadowColor: "#000",
shadowOpacity: 0.15,
shadowRadius: 2.84,
shadowOffset: {
width: 0,
height: 1
}
},
shadow_btn_small: {
elevation: 3,
shadowColor: "#000",
shadowOpacity: 0.25,
shadowRadius: 2,
shadowOffset: {
width: 1,
height: 1
}
}
};
var colors_default = colors;
// src/themes/fontSize.ts
var fontSize_default = {
_8: scaleFont(8),
_10: scaleFont(10),
_11: scaleFont(11),
_12: scaleFont(12),
_13: scaleFont(13),
_14: scaleFont(14),
_16: scaleFont(16),
_18: scaleFont(18),
_20: scaleFont(20),
_22: scaleFont(22),
_24: scaleFont(24),
_28: scaleFont(28),
_30: scaleFont(30),
_36: scaleFont(36),
_48: scaleFont(48)
};
// src/SvgIcon/components/IconPlus.tsx
var import_react = __toESM(require("react"));
var import_react_native_svg = __toESM(require("react-native-svg"));
var IconPlus = ({
size,
color,
strokeWidth,
style
}) => {
return /* @__PURE__ */ import_react.default.createElement(
import_react_native_svg.default,
{
width: size,
height: size,
viewBox: "0 0 24 24",
fill: "none",
style
},
/* @__PURE__ */ import_react.default.createElement(
import_react_native_svg.Line,
{
x1: "12",
y1: "5",
x2: "12",
y2: "19",
stroke: color,
strokeWidth,
strokeLinecap: "round"
}
),
/* @__PURE__ */ import_react.default.createElement(
import_react_native_svg.Line,
{
x1: "5",
y1: "12",
x2: "19",
y2: "12",
stroke: color,
strokeWidth,
strokeLinecap: "round"
}
)
);
};
var IconPlus_default = IconPlus;
// src/SvgIcon/components/IconCheckBox.tsx
var import_react2 = __toESM(require("react"));
var import_react_native_svg2 = __toESM(require("react-native-svg"));
var IconCheckBox = ({
size,
color,
strokeWidth,
fill,
style
}) => {
return /* @__PURE__ */ import_react2.default.createElement(
import_react_native_svg2.default,
{
width: size,
height: size,
viewBox: "0 0 24 24",
fill: "none",
style
},
/* @__PURE__ */ import_react2.default.createElement(
import_react_native_svg2.Rect,
{
x: "3",
y: "3",
width: "18",
height: "18",
rx: "2",
ry: "2",
stroke: color,
strokeWidth,
fill
}
),
/* @__PURE__ */ import_react2.default.createElement(
import_react_native_svg2.Path,
{
d: "M7 12.5L10.5 16L17 8",
stroke: color,
strokeWidth,
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
);
};
var IconCheckBox_default = IconCheckBox;
// src/SvgIcon/components/IconCheckBoxWithBg.tsx
var import_react3 = __toESM(require("react"));
var import_react_native_svg3 = __toESM(require("react-native-svg"));
var IconCheckBoxWithBg = ({
size,
color,
strokeWidth,
fill,
style
}) => {
return /* @__PURE__ */ import_react3.default.createElement(
import_react_native_svg3.default,
{
width: size,
height: size,
viewBox: "0 0 24 24",
fill: "none",
style
},
/* @__PURE__ */ import_react3.default.createElement(
import_react_native_svg3.Rect,
{
x: "3",
y: "3",
width: "18",
height: "18",
rx: "2",
ry: "2",
stroke: color,
strokeWidth,
fill: color
}
),
/* @__PURE__ */ import_react3.default.createElement(
import_react_native_svg3.Path,
{
d: "M7 12.5L10.5 16L17 8",
stroke: fill,
strokeWidth,
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
);
};
var IconCheckBoxWithBg_default = IconCheckBoxWithBg;
// src/SvgIcon/components/IconCheckBoxOutlineBlank.tsx
var import_react4 = __toESM(require("react"));
var import_react_native_svg4 = __toESM(require("react-native-svg"));
var IconCheckBoxOutlineBlank = ({
size,
color,
strokeWidth,
fill,
style
}) => {
return /* @__PURE__ */ import_react4.default.createElement(
import_react_native_svg4.default,
{
width: size,
height: size,
viewBox: "0 0 24 24",
fill: "none",
style
},
/* @__PURE__ */ import_react4.default.createElement(
import_react_native_svg4.Rect,
{
x: "3",
y: "3",
width: "18",
height: "18",
rx: "2",
ry: "2",
stroke: color,
strokeWidth,
fill
}
)
);
};
var IconCheckBoxOutlineBlank_default = IconCheckBoxOutlineBlank;
// src/SvgIcon/components/IconAlertCircle.tsx
var import_react5 = __toESM(require("react"));
var import_react_native_svg5 = __toESM(require("react-native-svg"));
var IconAlertCircle = ({
size,
color,
strokeWidth,
fill,
style
}) => {
return /* @__PURE__ */ import_react5.default.createElement(
import_react_native_svg5.default,
{
width: size,
height: size,
viewBox: "0 0 24 24",
fill: "none",
style
},
/* @__PURE__ */ import_react5.default.createElement(
import_react_native_svg5.Circle,
{
cx: "12",
cy: "12",
r: "10",
stroke: color,
strokeWidth,
fill
}
),
/* @__PURE__ */ import_react5.default.createElement(
import_react_native_svg5.Line,
{
x1: "12",
y1: "7",
x2: "12",
y2: "12",
stroke: color,
strokeWidth,
strokeLinecap: "round"
}
),
/* @__PURE__ */ import_react5.default.createElement(import_react_native_svg5.Circle, { cx: "12", cy: "17", r: strokeWidth, fill: color })
);
};
var IconAlertCircle_default = IconAlertCircle;
// src/SvgIcon/components/IconAngleRight.tsx
var import_react6 = __toESM(require("react"));
var import_react_native_svg6 = __toESM(require("react-native-svg"));
var IconAngleRight = ({
size,
color,
strokeWidth,
style
}) => {
return /* @__PURE__ */ import_react6.default.createElement(
import_react_native_svg6.default,
{
width: size,
height: size,
viewBox: "0 0 24 24",
fill: "none",
style
},
/* @__PURE__ */ import_react6.default.createElement(
import_react_native_svg6.Polyline,
{
points: "9 6 15 12 9 18",
stroke: color,
strokeWidth,
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
);
};
var IconAngleRight_default = IconAngleRight;
// src/SvgIcon/components/IconAngleLeft.tsx
var import_react7 = __toESM(require("react"));
var import_react_native_svg7 = __toESM(require("react-native-svg"));
var IconAngleLeft = ({
size,
color,
strokeWidth,
style
}) => {
return /* @__PURE__ */ import_react7.default.createElement(
import_react_native_svg7.default,
{
width: size,
height: size,
viewBox: "0 0 24 24",
fill: "none",
style
},
/* @__PURE__ */ import_react7.default.createElement(
import_react_native_svg7.Polyline,
{
points: "15 18 9 12 15 6",
stroke: color,
strokeWidth,
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
);
};
var IconAngleLeft_default = IconAngleLeft;
// src/SvgIcon/components/IconPlayCircle.tsx
var import_react8 = __toESM(require("react"));
var import_react_native_svg8 = __toESM(require("react-native-svg"));
var IconPlayCircle = ({
size,
color,
strokeWidth,
fill,
style
}) => {
const circleStrokeWidth = scale(5);
const circleRadius = 50 - circleStrokeWidth / 2;
return /* @__PURE__ */ import_react8.default.createElement(
import_react_native_svg8.default,
{
width: size,
height: size,
viewBox: "0 0 100 100",
style
},
/* @__PURE__ */ import_react8.default.createElement(
import_react_native_svg8.Circle,
{
cx: "50",
cy: "50",
r: circleRadius,
fill,
stroke: color,
strokeWidth
}
),
/* @__PURE__ */ import_react8.default.createElement(
import_react_native_svg8.Polygon,
{
points: "40,30 40,70 70,50",
fill: color,
stroke: color,
strokeWidth
}
)
);
};
var IconPlayCircle_default = IconPlayCircle;
// src/SvgIcon/SvgIcon.tsx
var SvgIcon = ({
name = "angle-left",
size = scale(23),
color = colors_default.black,
strokeWidth = scale(1),
fill = "none",
style
}) => {
switch (name) {
case "play-circle":
return /* @__PURE__ */ import_react9.default.createElement(
IconPlayCircle_default,
{
size,
color,
strokeWidth,
fill,
style
}
);
case "plus":
return /* @__PURE__ */ import_react9.default.createElement(
IconPlus_default,
{
size,
color,
strokeWidth,
style
}
);
case "check-box":
return /* @__PURE__ */ import_react9.default.createElement(
IconCheckBox_default,
{
size,
color,
strokeWidth,
fill,
style
}
);
case "check-box-with-bg":
return /* @__PURE__ */ import_react9.default.createElement(
IconCheckBoxWithBg_default,
{
size,
color,
strokeWidth,
fill,
style
}
);
case "check-box-outline-blank":
return /* @__PURE__ */ import_react9.default.createElement(
IconCheckBoxOutlineBlank_default,
{
size,
color,
strokeWidth,
fill,
style
}
);
case "alert-circle":
return /* @__PURE__ */ import_react9.default.createElement(
IconAlertCircle_default,
{
size,
color,
strokeWidth,
fill,
style
}
);
case "angle-right":
return /* @__PURE__ */ import_react9.default.createElement(
IconAngleRight_default,
{
size,
color,
strokeWidth,
style
}
);
case "angle-left":
default:
return /* @__PURE__ */ import_react9.default.createElement(
IconAngleLeft_default,
{
size,
color,
strokeWidth,
style
}
);
}
};
var SvgIcon_default = SvgIcon;
//# sourceMappingURL=SvgIcon.js.map